JavaScript详解原型和原型链

• Person===Person.prototype.constructor

• 我们更新一下关系图

• constructor补充说明

function Person() {

}

var person = new Person();

console.log(person.constructor === Person); // true

• 当获取 person.constructor 时，其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时，会从 person 的原型也就是 Person.prototype 中读取，正好原型中有该属性，所以：

• person.constructor === Person.prototype.constructor

四、实例与原型、原型的原型

---

• 实例与原型

• 当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。

function Person() {

}

Person.prototype.name = ‘zhangsan’;

var person = new Person();

person.name = ‘lisi’;

console.log(person.name) // lisi

delete person.name; //删除person name 属性

console.log(person.name) // zhangsan

• 在这个例子中，我们给实例对象 person 添加了 name 属性，当我们打印 person.name 的时候，结果自然为 lisi。

但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.__ proto__ ，也就是 Person.prototype中查找，幸运的是我们找到了 name 属性，结果为 zhangsan。

• 但是万一还没有找到呢？原型的原型又是什么呢？

• 原型的原型

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

var obj = new Object();

obj.name = ‘zhangsan’

console.log(obj.name) // zhangsan

• 其实原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 __ proto__ 指向构造函数的 prototype

• 这时我们可以再次更新关系图：

五、原型链

---

• 简单的回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。

——摘自《javascript高级程序设计》

• 那么Object.prototype 的原型呢？

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

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

null 表示“没有对象”，即该处不应该有值。

所以 Object.prototype.proto 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。

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

综上所述,关系图最终更新为：

new运算符的实现原理

======================================================================

当我们用new运算符new一个构造函数产生一个实例时，比如说： var obj = new Func 时，其背后的步骤是这样的：

1：创建一个继承自 Func.prototype 的新对象；

2：执行构造函数 Func ，执行的时候，相应的传参会被传入，同时上下文(this)会被指定为第一步创建的新实例；

3：如果构造函数返回了一个“对象”,那么这个对象会取代步骤1中new出来的实例被返回。如果构造函数没有返回对象,那么new出来的结果为步骤1创建的对象。

注意：new Func 等同于new Func()，只能用在不传递任何参数的情况。

按照上述原理，写一段代码模拟new运算符的实现原理：

var new1 = function(fun){

var newObj = Object.create(fun.prototype);

var returnObj = fun.call(newObj);

if(typeof returnObj === ‘object’){

return returnObj

}else{

return newObj

}

}

Object.create()方法Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

var newObj = Object.create(fun.prototype) 的意思是：创建一个新对象newObj，并让 newObj.__ proto__ 指向 fun，即 newObj.__ proto__ === fun 返回true。

• 模拟new运算符之后进行验证

instanceof判断数据类型

===========================================================================

• instanceof是判断实例对象的__proto__和生成该实例的构造函数的prototype是不是引用的同一个地址。

是返回true，否返回false。

• 注意：实例的instanceof在比较的时候，与原型链上向上找的的构造函数相比都是true。

• instanceof用来判断A是否为B的实例，表达式为：A instanceof B，如果A是B的实例，则返回true，否则返回false。instanceof检测的是原型，内部机制是通过判断对象的原型链中是否有类型的原型。

{} instanceof Object; //true

[] instanceof Array; //true

[] instanceof Object; //true

“123” instanceof String; //false

new String(123) instanceof String; //true

function Person1(){}

function Person2(){}

let person1=new Person1()

let person2=new Person2()

console.log(person1 instanceof Person1) //true

console.log(person2 instanceof Person2) //true

console.log(person1 instanceof Person2) //false

• 我们可以用下面的代码实现instanceof。

function instance(left,right){

let prototype = right.prototype; //获取类型的原型

let proto = left.proto; //获取对象的原型

while(true){ //循环判断对象的原型是否等于类型的原型，直到对象原型为null，因为原型链最终为null

if (proto === null || proto === undefined){

return false;

}

if (proto === prototype){

return true;

}

proto = proto.proto;

}

}

console.log(instance({},Object)); //true

console.log(instance([],Number)); //false

• 那怎么判断实例是由哪个构造函数生成的呢？这时候就要用到constructor了。

• 实例的原型的构造函数， obj.__ proto__.constructor

• 当一个函数F被定义时，JS引擎会为F添加prototype原型，然后在prototype上添加一个constructor属性，并让其指向F的引用，F利用原型对象的constructor属性引用了自身，当F作为构造函数创建对象时，原型上的constructor属性被遗传到了新创建的对象上，从原型链角度讲，构造函数F就是新对象的类型。这样做的意义是，让对象诞生以后，就具有可追溯的数据类型。

实例方法与静态方法

====================================================================

• 静态方法：

function Person(){}

Person.sayHello=function(){

console.log(“Hello world”)

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
005)]

[外链图片转存中…(img-qBKcJbc1-1715528117005)]

[外链图片转存中…(img-GrjVdq6A-1715528117006)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！