文档章节

javascript中的__proto__ && prototype

hirainn
 hirainn
发布于 2016/04/03 14:36
字数 744
阅读 38
收藏 0

说到__protot__ 跟 prototype 就要说到new了

首先要说的是,new 一个对象的整个过程中,产生的对象有3个,例如下面这段代码中

let Human = function(name,age,gender){
    this.name   = name;
    this.age    = age;
    this.gender = gender;
};
console.log(Human.prototype.constructor === Human);  //true
let people = new Human('rainn',25,'male');
console.log(people.__proto__ === Human.prototype);  //true

在创建Human的时候 系统会为其创建了一个原型对象Human prototype,Human prototype中会创建一个constructor属性指向Human,而Human 中的prototype又会指向Human prototype.

再看看new 的过程,. 大概可以分成3个步骤 : 声明变量people , 将people的__proto__属性指向 Human prototype,然后执行Human.call(people),即执行constructor.

Human.prototype 是指向的Human prototype这个对象的,由people.__proto__===Human.prototype 就可以证明上述new 过程中的第二点.

__proto__是什么?简单来说,就是对象内部初始化一个属性,就是__proto__,这个属性指向的就是它的原型,当我们访问对象内部的一个属性或方法时,当对象内部不存在该属性或者方法时,就会去原型中寻找需要的属性或者方法,而它的原型又有原型,不存在还会继续沿着原型找下去,这就是原型链的概念.

比如上述代码中,Human中只有3个属性,并没有say方法,而需要用到方法时,可以采用两种方式;

let Human = function(name,age,gender){
    this.name   = name;
    this.age    = age;
    this.gender = gender;
    this.say    = function(){
        return 'hello i'm ${this.name}. I'm ${this.age} and I'm a ${this.gender}';
    }
};
let people = new Human('rainn',25,'big boy');
alert(people.say());   //hello i'm rainn. I'm 25 and I'm a big boy;

这种方式可以实现添加say方法,但是如果需要new多个对象的时候,就会占用更多的内存,所以可以采取在原型链中添加方法

let Human = function(name,age,gender){
    this.name   = name;
    this.age    = age;
    this.gender = gender;
};
/*
此处仅证明当people原型Human中没有say方法而Human原型中有时,也可以调用say方法,与下面代码不同时写入
Human.prototype.__proto__.say = function(){
    return `hello i'm ${this.name}. I'm ${this.age} and I'm a ${this.gender}`;
}
*/
Human.prototype.say = function(){
    return `hello i'm ${this.name}. I'm ${this.age} and I'm a ${this.gender}`;
}
let people = new Human('rainn',25,'big boy');
alert(people.say());   //hello i'm rainn. I'm 25 and I'm a big boy;

可以看到,当people中不存在say方法时,会向__proto__指向的Human prototype中寻找,如果没有,会继续向上一层的__proto__中寻找,此时say方法时存在原型中,所以即使new 更多的对象,也不会占用额外的内存去保存这些方法.

可以看到,原型链的实现在于__proto__,在上面例子中,people.__proto__与Human.prototype 指向的都是Human prototype,而在添加原型属性或者方法时,才会采用Human.prototype,因为 在原型中添加属性或者方法时,多数情况是在new 对对象之前,这个时候就通过people.__proto__添加所需要的属性或方法.


以上内容本人见解,如有错误,望指出共进步,谢谢


© 著作权归作者所有

hirainn
粉丝 35
博文 83
码字总数 65318
作品 0
深圳
程序员
私信 提问
js中的prototype和构造函数

js中没有类的感念,继承也是通过原型链来实现的对象的继承而不是类的继承 Vjeux写的这篇文章应该能帮助我们更好的理解js中原型的工作方式:http://blog.vjeux.com/2011/javascript/how-proto...

leo-H
2013/04/08
619
0
关于javascript的原型和原型链,看我就够了(三)

温故 我们先回顾一下前两天讨论的内容 创建对象的三种方式 通过对象直接量 通过new创建对象 通过Object.create() js中对象分为两种 函数对象 普通对象 原型对象prototype 每一个函数对象都有...

陌上寒
2018/11/04
0
0
JavaScript中__proto__与prototype的关系

JavaScript中proto与prototype的关系 这里讨论下对象的内部原型(proto)和构造器的原型(prototype)的关系。 一、所有构造器/函数的proto都指向Function.prototype,它是一个空函数(Empty f...

泡不烂的凉粉
2013/05/21
112
0
一个后端眼中的js对象和原型链

js对象 js中的类型有: 所以对象可以这么分类: 函数对象(function) 其他对象 所以函数对象可以大声唱我们不一样,既然不一样肯定得有一点不一样的烟火,函数对象的不一样在什么地方呢?每一...

trayvon
2017/10/19
20
0
再谈 javascript 面向对象编程

前言:虽有陈皓《Javascript 面向对象编程》珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力。另外这篇文章是一篇入门文章,我也是才开始学习Javascr...

aoniao
2012/02/28
4.5K
22

没有更多内容

加载失败,请刷新页面

加载更多

哪些情况下适合使用云服务器?

我们一直在说云服务器价格适中,具备弹性扩展机制,适合部署中小规模的网站或应用。那么云服务器到底适用于哪些情况呢?如果您需要经常原始计算能力,那么使用独立服务器就能满足需求,因为他...

云漫网络Ruan
今天
10
0
Java 中的 String 有没有长度限制

转载: https://juejin.im/post/5d53653f5188257315539f9a String是Java中很重要的一个数据类型,除了基本数据类型以外,String是被使用的最广泛的了,但是,关于String,其实还是有很多东西...

低至一折起
今天
23
0
OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
11
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
9
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部