资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/__proto__和prototype之区别和联系

__proto__和prototype之区别和联系

paulli3 / 1610人阅读

摘要：当这步完成，这个对象就与构造函数再无联系，这个时候即使构造函数再加任何成员，都不再影响已经实例化的对象了。此时，对象具有了和属性，同时具有了构造函数的原型对象的所有成员，当然，此时该原型对象是没有成员的。

学到原型的时候感觉头都大了/(ㄒoㄒ)/~~ 尤其是prototype和__proto__ 傻傻分不清，通过多番查找资料，根据自己的理解，记录下最近研究对象的一些心得，做一个记录与总结，以加深自己的印象，同时，希望也能给其他学JavaScript同胞一点启发。

在JavaScript中，万物皆对象。咱们写一个JavaScript对象，大多数时候是用构造函数创建一个对象或者用对象字面量创建一个对象。比如：

//通过构造函数来创建对象
function Person() {
    //...
}
var person1 = new Person();
//通过对象字面量创建对象
var person2 = {
    name: "jessica",
    age: 27,
    job: "teacher"
}

当然还有其他方式创建对象，这里就不列举出来了。那么问题来了，通过不同的方式创建的对象有什么区别呢？
我们知道，每个JS对象一定对应一个原型对象，并从原型对象继承属性和方法。那么对象是怎么和这个原型对象对应的呢？带着问题慢慢看下面的内容吧

__proto__和prototype概念区分

其实说__proto__并不准确，确切的说是对象的[[prototype]]属性，只不过在主流的浏览器中，都用__proto__来代表[[prototype]]属性，因为[[prototype]]只是一个标准，而针对这个标准，不同的浏览器有不同的实现方式。在ES5中用Object.getPrototypeOf函数获得一个对象的[[prototype]]。ES6中，使用Object.setPrototypeOf可以直接修改一个对象的[[prototype]]。为了方便，我下面的文章用__proto__来代表对象的[[prototype]]。

而prototype属性是只有函数才特有的属性，当你创建一个函数时，js会自动为这个函数加上prototype属性，值是一个空对象。所以，函数在js中是非常特殊的，是所谓的一等公民。
那么__proto__和prototype是怎么联系起来的呢？让我们来看下下面的代码：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var person1 = new Person("jessica", 27);

当我们new Person()的时候到底发生了什么？
new一个构造函数，相当于实例化一个对象，这期间其实进行了这三个步骤：

创建对象，设为o，即： var o = {};
上文提到了，每个对象都有__proto__属性，该属性指向一个对象，这里，将o对象的__Proto__指向构造函数Person的原型对象（Person.prototype）;
将o作为this去调用构造函数Person，从而设置o的属性和方法并初始化。
当这3步完成，这个o对象就与构造函数Person再无联系，这个时候即使构造函数Person再加任何成员，都不再影响已经实例化的o对象了。
此时，o对象具有了name和age属性，同时具有了构造函数Person的原型对象的所有成员，当然，此时该原型对象是没有成员的。

现在大家都明白了吧，简单的总结下就是：
js在创建对象的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype
那么一个对象的__proto__属性究竟怎么决定呢？答案显而易见了：是由构造该对象的方法决定的。

创建对象的不同方法解析

下面讲解三种常见的创建对象方法。

对象字面量

比如：

var Person = {
    name: "jessica",
    age: 27
}

这种形式就是对象字面量，通过对象字面量构造出的对象，其__proto__指向Object.prototype。
所以，其实Object是一个函数也不难理解了。Object、Function都是是js自带的函数对象。
可以跑下面的代码看看：

console.log(typeof Object); 
console.log(typeof Function);
构造函数

就如我前面讲的，形如：

function Person(){}
var person1 = new Person();

这种形式创建对象的方式就是通过构造函数创建对象，这里的构造函数是Person函数。上面也讲过了，通过构造函数创建的对象，其__proto指向的是构造函数的prototype属性指向的对象。

Object.create 
var person1 = {
    name: "jessica",
    age: 27
}
var person2 = Object.create(person1);

这种情况下，person2的__proto__指向person1。在没有Object.create函数的时候，人们大多是这样做的：

Object.create = function(p) {
    function f(){};
    f.prototype = p;
    return new f();
}

一看大家就会明白了。

总结

其实仔细思考下上面提到的三种创建对象的方法，追究其本质，不难发现，最根本的还是利用构造函数再通过new来创建对象。所谓的对象字面量也只不过是语法糖而已，本质上是var o = new Object(); o.xx = xx;o.yy=yy;。 所以，函数真不愧是js中的一等公民呀~

原型链

既然已经提到了原型，就不得不提一下原型链了，毕竟这是实现继承最关键所在，也是js对象精妙所在。
还记得上文提到的一个总结吗？不记得？没关系，我贴出来让大家温故而知新，哈哈~
js在创建对象的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype
而原型链的基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法。
让我们再简单回顾下构造函数、原型和实例的关系：
每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针（constructor），而实例则包含一个指向原型对象的内部指针（__proto__）。
我们拿一个例子来讲解：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var person1 = new Person("jessica", 27);

一图胜前言，我们用画图的形式来讲解下上面的例子：

从上图可以看到，其实原型链的顶端是Object.prototype.__proto__,也即为null。

总结

函数是js中的一等公民，js在创建对象的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype。只有函数有prototype, 当你创建一个函数时，js会自动为这个函数加上prototype属性，值是一个空对象。

祝大家早日富可敌国，bye~

超融合服务器 混合云 i节点_检查和修复linux 服务器虚拟化_集群和云 服务器_云区别 session和cookie的区别和联系

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97677.html

相关文章

  • javascript对象详解：__proto__和prototype的区别和联系

    摘要：当这步完成，这个对象就与构造函数再无联系，这个时候即使构造函数再加任何成员，都不再影响已经实例化的对象了。此时，对象具有了和属性，同时具有了构造函数的原型对象的所有成员，当然，此时该原型对象是没有成员的。 前言 本篇文章用来记录下最近研究对象的一些心得，做一个记录与总结，以加深自己的印象，同时，希望也能给正在学习中的你一点启发。本文适合有一定JavaScript基础的童鞋阅读。原文戳这...

    chavesgu 评论0 收藏0

  • 关于javascript的原型和原型链，看我就够了（二）

    摘要：原文链接关于的原型和原型链，看我就够了一参考链接闯关记之原型及原型链之原型与原型链一篇文章带你理解原型和原型链彻底理解原型链一的默认指向图解和的三角关系原型和原型链三张图搞懂的原型对象与原型链 温故 创建对象的三种方式 通过对象直接量 通过new创建对象 通过Object.create() js中对象分为两种 函数对象 普通对象 仔细观察如下代码 function Foo(na...

    eccozhou 评论0 收藏0

  • 深入学习js之——原型和原型链

    摘要：我们用一张图表示构造函数和实例原型之间的关系好了构造函数和实例原型之间的关系我们已经梳理清楚了，那我们怎么表示实例与实例原型，也就是或者和之间的关系呢。 开篇： 在Brendan Eich大神为JavaScript设计面向对象系统的时候，借鉴了Self 和Smalltalk这两门基于原型的语言，之所以选择基于原型的面向对象系统，并不是因为时间匆忙，它设计起来相对简单，而是因为从一开始B...

    FingerLiu 评论0 收藏0

  • 深入学习js之——原型和原型链

    摘要：我们用一张图表示构造函数和实例原型之间的关系好了构造函数和实例原型之间的关系我们已经梳理清楚了，那我们怎么表示实例与实例原型，也就是或者和之间的关系呢。 开篇： 在Brendan Eich大神为JavaScript设计面向对象系统的时候，借鉴了Self 和Smalltalk这两门基于原型的语言，之所以选择基于原型的面向对象系统，并不是因为时间匆忙，它设计起来相对简单，而是因为从一开始B...

    xialong 评论0 收藏0

  • 浅析JavaScript中原型及constructor、__proto__、prototype的关系

    摘要：搞清了构造函数和原型的区别后，就可以继续了。指向构造函数的原型对象，存在于实例与构造函数的原型对象之间。要注意的是当我们使用下面这种将整个重写的情况时，会切断构造函数和原型之间的联系，也就是说不再指向了，而是指向。 前言 先说一说为什么要搞清楚JavaScript的原型，因为这就是JS的根。JavaScript虽然不是一门传统的面向对象语言，但它有自己的类和继承机制，最重要的就是它采用...

    wenzi 评论0 收藏0

发表评论

登陆后可评论

0条评论

paulli3

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<