我们先再来理一理原型
Object1 = {name:'deng',age:18
}
Object2 ={name:'ru',age:18
}
const Person = function(){}
Person.prototype = Object1;
const p1 = new Person();
console.log(p1.name); //deng
Person.prototype = null;
console.log(p1.name); //deng
上面给Person的构造函数绑定了一个原型,接着new了他的对象。紧接着将构造函数的原型置空,这时候可以发现当构造函数的prototype改变并没有影响p1的属性
也就是说创建出的对象跟构造函数没有任何关系了,他是独立的个体,他只是继承了构造函数中的属性,他跟构造函数的原型有关系。
我们来打印一下这个对象
console.log(p1);
对象通过__proto__属性来找到原型。但是对象本身是没有这个属性的,我们可以看看
这个对象是一个空对象(浅色标记不是真实属性,控制台为了方便你查看这个继承关系,会将 Prototype
属性显示出来。)之前文章讲过:
proto ,绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在于 Person.prototype 中,实际上,它是来自于 Object.prototype ,与其说是一个属性,不如说是一个 getter/setter,当使用 obj.proto 时,可以理解成返回了 Object.getPrototypeOf(obj)。
可以看到它显示的是Person的实例对象,他是怎么找到它的构造函数的呢?难道是通过他的原型对象的construcor找到的?我们尝试修改他的__proto__属性。
p1.__proto__ = Object2;
重新打印他,发现仍是Person
实际上 JavaScript 对象有隐式属性如 [[Constructor]]
、[[Prototype]]
、[[Scopes]]
、[[IsArray]]
等,都是 JavaScript 引擎在幕后管理的,通常不直接暴露给开发者,但它们对对象的行为、继承、作用域管理等有着重要的作用。
person1.constructor
返回的是Person.prototype.constructor
,它是指向Person
函数的。[[Constructor]]
是 JavaScript 引擎内部的隐式属性,它实际上不会暴露出来,所以我们无法直接访问。
person1.constructor
访问的是原型链上的 constructor
属性,而不是内部的 [[Constructor]]
隐式属性。
当我们想要创建一个对象时,会发生以下几个过程
一:构造函数创建过程:创建一个对象,让他来充当函数的原型对象。
二:对象创建过程:
- 创建一个空对象
- 将新对象的
__proto__
属性指向构造函数的prototype
属性。 - 执行构造函数中的代码,将
this
绑定到新对象,并为它添加属性。 - 如果构造函数没有显式返回对象,
new
表达式会返回新创建的对象。
接下来我们来手写这个过程
myNew(Person,'deng',18);
function myNew(){
let obj = {};
let con = [].shift.call(arguments);
obj.this = con;
const res = con.apply(obj,arguments);
return res instanceof Object ? res : obj;
}`