JavaScript深入之原型到原型链.md

JavaScript深入之原型到原型链

构造函数创建对象

function Person(){
    
}
var person = new Person();
person.name = 'Ljfy';
console.log(person.name);

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

prototype

只有函数才有prototype属性，就是我们经常在各种例子中看到的那个prototype

function Person(){
    
}
Person.prototype.name = 'Ljfy';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name);//Ljfy
console.log(person2.name);//Ljfy

那么这个函数的prototype属性指向的是什么呢?是这个函数的原型吗？

其实,函数的prototype属性指向了一个对象，这个对象正是构造函数而创建的实例的原型，也就是这个例子中的person1、person2的原型

那么什么是原型呢?可以这样理解：每一个JavaScript对象(null除外)在创建的时候就会与之关联一个对象，这个对象就是我们说的原型,每一个对象都会从原型继承属性。

在这张图中我们用Object.prototype表示实例原型。

那么该怎么表示实例与实例原型，也就是person和Person.prototype之间的关系的呢？

__proto__

这是每一个js对象(除了null)都具有的一个属性，叫__proto__,这个属性会指向该对象的原型

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

更新一下关系图

既然实例对象和构造函数都可以指向原型，那么原型是否有属性指向构造函数或者实例呢?

constructor

指向实例倒是没有，因为一个构造函数可以生成多个实例，但是原型指向构造函数倒是有的，

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

function Person(){
    
}
console.log(Person === Person.prototype.constructor);//true

更新一下关系图

综上得出

function Person(){
    
}
var person = new Person();
console.log(person.__proto__ == Person.prototype);//true
console.log(Person.prototype.constructor== Person);//true
//获得对象的原型
console.log(Object.getPrototypeOf(person)===Person.prototype);//true

实例与原型

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

function Person(){
    
}
Person.prototype.name = 'Ljfy';
var person = new Person();
person.name = new Person();
console.log(person.name);//Ljfy
delete person.name;
console.log(person.name)

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

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

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

原型的原型

原型也是一个对象，既然是对象，我们就可以用原始的方式创建它，那就是;

var obj = new Object();
obj.name = 'ljfy';
console.log(obj.name);//ljfy

所以原型对象是通过Object构造函数生成的，结合之前所讲，实例的__proto__指向构造函数的prototype在次更新关系图

原型链

那么Object.prototype的原型呢?

null？

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

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

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

proto

绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于Person.prototype中，实际上，它是来自于Object.prototype，与其说是一个属性，不如说是一个getter、setter,当使用obj.__proto__时，可以理解成返回了Object.getPrototype(obj)

真的是继承吗

每一个对象都会从原型中继承属性,实际上，继承是一个十分具有迷惑性的说法，继承意味着复制操作，然而js默认并不会复制对象的属性，相反，javascript只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确。