JavaScript系列 - 深入之从原型到原型链

shadajin 发布于2019-08-26 12:01 / 573人阅读

摘要：本文详情构造函数创建对象先使用构造函数创建一个对象在这个例子中，就是一个构造函数，我们使用创建了一个实例对象。

本文详情：https://github.com/mqyqingfen...

构造函数创建对象
先使用构造函数创建一个对象

function Person(){

}
var person = new Person();
person.name = "Mit";
console.log(person.name)

在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。

prototype
每个函数都有一个prototype对象

function Person() {

}
// 虽然写在注释里，但是你要注意：
// prototype是函数才会有的属性
Person.prototype.name = "Kevin";
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

函数的prototype对象指向该构造函数创建实例的原型

(__proto__)
每个js对象都具有一个属性，叫__proto__，这个属性指向该对象的原型

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

更新如下

constructor
每个原型都有一个constructor属性指向关联的构造函数

实例和原型
当读取完实例的属性是，如果找不到，就会查找与对象关联的原型中的属性，如果找不到，就回去原型中去查找

function Person() {

}

Person.prototype.name = "Kevin";

var person = new Person();

person.name = "Daisy";
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin

原型的原型
在前面，我们已经讲了原型也是一个对象，既然是对象，我们就可以用最原始的方式创建它，那就是：

var obj = new Object();
obj.name = "Kevin"
console.log(obj.name) // Kevin

其实原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 proto 指向构造函数的 prototype ，所以我们再更新下关系图：

原型链

那 Object.prototype 的原型呢？

null，我们可以打印：

console.log(Object.prototype.__proto__ === null) // true

然而 null 究竟代表了什么呢？

引用阮一峰老师的《undefined与null的区别》就是：

null 表示“没有对象”，即该处不应该有值。
所以 Object.prototype.__proto__ 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。

所以查找属性的时候查到 Object.prototype 就可以停止查找了。

最后一张关系图也可以更新为：

GPU云服务器云服务器原型原型链原型链 javascript原型原型链继承

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

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

JavaScript深入之从原型到原型链

摘要：深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。让我们用一张图表示构造函数和实例原型之间的关系在这张图中我们用表示实例原型。 JavaScript深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。构造函数创建对象我们先...

Songlcy 2019-08-21 15:32 评论0 收藏0
JavaScript深入之new的模拟实现

摘要：深入系列第十二篇，通过的模拟实现，带大家揭开使用获得构造函数实例的真相一句话介绍运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一也许有点难懂，我们在模拟之前，先看看实现了哪些功能。 JavaScript深入系列第十二篇，通过new的模拟实现，带大家揭开使用new获得构造函数实例的真相 new 一句话介绍 new: new 运算符创建一个用户定义的对象类型的实例或具...

tianlai 2019-08-20 16:17 评论0 收藏0
JavaScript深入之bind的模拟实现

摘要：也就是说当返回的函数作为构造函数的时候，时指定的值会失效，但传入的参数依然生效。构造函数效果的优化实现但是在这个写法中，我们直接将，我们直接修改的时候，也会直接修改函数的。 JavaScript深入系列第十一篇，通过bind函数的模拟实现，带大家真正了解bind的特性 bind 一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数...

FingerLiu 2019-08-20 16:15 评论0 收藏0
JavaScript深入系列15篇正式完结！

摘要：写在前面深入系列共计篇已经正式完结，这是一个旨在帮助大家，其实也是帮助自己捋顺底层知识的系列。深入系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 深入系列共计 15 篇已经正式完结，这是一个旨在帮助大家，其实也是帮助自己捋顺 JavaScript 底层知识的系列。重点讲解了如原型、作用域、执行上下文、变量对象、this、...

fxp 2019-08-20 16:50 评论0 收藏0
JavaScript深入之继承的多种方式和优缺点

摘要：深入系列第十五篇，讲解各种继承方式和优缺点。优点融合原型链继承和构造函数的优点，是中最常用的继承模式。寄生组合式继承为了方便大家阅读，在这里重复一下组合继承的代码组合继承最大的缺点是会调用两次父构造函数。 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎...

JackJiang 2019-08-20 16:30 评论0 收藏0