一、javascript继承机制
在javascript语言中，new命令后面跟的不是类，而是构造函数(javascript语言的传统方法通过构造函数定义并生成实例对象，es6中新增了class语法糖，通过对象模版定义和生成实例对象)。用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。因此javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。因此可以把那些不变的属性和方法，直接定义在prototype对象上，然后生成实例。由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像"继承"了prototype对象一样，这可简单理解为javascript的继承机制。
二、原型
在javascript中，原型也是一个对象，通过原型可以实现对象的属性继承，javascript的对象中都包含了一个”[[prototype]]”内部属性，这个属性所对应的就是该对象的原型。
“[[prototype]]”作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，firefox和chrome中提供了__proto__这个非标准（不是所有都支持）的访问器（ecma引入了标准对象原型访问器”object.getprototype(object)”）。在javascript的原型对象中，还包含一个”constructor”属性，这个属性对应创建所有指向该原型的实例的构造函数。
三、对象实例化规则
在javascript中，每个函数 都有一个prototype属性，当一个函数被用作构造函数来创建实例时，这个函数的prototype属性值会被作为原型赋值给所有对象实例（也就是设置 实例的`__proto__`属性），也就是说，所有实例的原型引用的是函数的prototype属性。(注：只有函数对象才会有这个属性。函数具有prototype属性，但函数也是对象，因此也具有__proto__属性，实例对象只有__proto__属性)。
实例化对象(new)的过程：例 let person = new person('刘', 18)
let person = {}：初始化一个对象person； person.__proto__ = person.prototype：为对象person添加__proto__属性，且该属性指向 person.prototype； person.call(person, "刘", 18)：重新定义person内的this，调用构造函数person初始化person。
四、object
object对象本身是一个函数对象。既然是object函数，就肯定会有prototype属性，所以可以看到”object.prototype”的值就是”object {}”这个原型对象。反过来，当访问”object.prototype”对象的”constructor”这个属性的时候，就得到了obejct函数。
另外，当通过”object.prototype.__proto__”获取object原型的原型的时候，将会得到”null”，也就是说”object {}”原型对象就是原型链的终点了。
五、function
所有的函数都是 function 的实例。在构造函数上都有一个原型属性 prototype，该属性也是一个对象；那么在原型对象上有一个 constructor 属性，该属性指向的就是构造函数；而实例对象上有一个 _proto_ 属性，该属性也指向原型对象，并且该属性不是标准属性，不可以用在中，该属性用于浏览器内部使用。
如上面例子中的构造函数，javascript中函数也是对象，所以就可以通过__proto__查找到构造函数对象的原型。
function对象作为一个函数，就会有prototype属性，该属性将对应”function () {}”对象。
function对象作为一个对象，就有__proto__属性，该属性对应”function.prototype”，也就是说，”function.__proto__ === function.prototype”。
在这里对“prototype”和“proto”进行简单的介绍：
对于所有的对象，都有__proto__属性，这个属性对应该对象的原型.
对于函数对象，除了__proto__属性之外，还有prototype属性，当一个函数被用作构造函数来创建实例时，该函数的prototype属性值将被作为原型赋值给所有对象实例（也就是设置实例的__proto__属性）。
六、原型链
因为每个对象和原型都有原型，对象的原型指向原型对象，而父的原型又指向父的父，这种原型层层连接起来的就构成了原型链。以person和person为例：
person.__proto__ === person.prototype，
而 person.prototype(即person {}) 也有_proto属性，它指向创建它的函数对象(object)的prototype，即person.__proto__ === object.prototype，
而 object.protptype(即object {}) 同样有__proto__属性，只是该属性指向特殊，为null，表明其已到达了顶端。
这一系列由__proto__ 串起来的链称为原型链
七、构造函数、原型、实例之间的关系
1. object
(非原创图)
2.function+object+array
(非原创图)
八、属性查找：
当查找一个对象的属性时，javascript 会向上遍历原型链，直到找到给定名称的属性为止，到查找到达原型链的顶部（也就是 object.prototype），如果仍然没有找到指定的属性，就会返回 undefined。例：
function person(name, age){
this.name = name;
this.age = age;
}
person.prototype.maxnumber = 9999;
person.__proto__.minnumber = -9999;
let will = new person("will", 28);
console.log(will.maxnumber); // 9999
console.log(will.minnumber); // undefined
在这个例子中分别给”person.prototype “和” person.__proto__”这两个原型对象添加了”maxnumber “和”minnumber”属性，这里就需要弄清”prototype”和”__proto__”的区别了。
九、”prototype”和”__proto__”的区别
仍以person、person为例。
person作为构造函数时的prototype 属性与person作为普通函数时的__proto__属性并不相等：
console.log(person.__proto__ == person.prototype); //false
实际上，person作为一个普通函数调用时，它的构造函数就是内置对象function，因此其指向的原型对象即function.prototype，与person.__proto__ === person.prototype同理。它的原型的原型指向为：
console.log(person.__proto__.__proto__ ); //object{}
即console.log(function.prototype.__proto__ ); //object{}
当person作为构造函数时，它的原型、它的原型的原型指向为：
console.log(person.prototype); //person{}
console.log(person.prototype.__proto__); //object{}
可得结果：
console.log(person.__proto__.__proto__ === person.prototype.__proto__); //true
因此：prototype属性可以给函数和对象添加共享(继承)的方法、属性，而__proto__是查找某函数或对象的原型链的方式。所以可以说原型链是通过__proto__属性链接起来的。
上面的例子中若想will查找到minnumber属性，则添加方式为：
person.minnumber = -9999;
或 person.prototype.__proto__.minnumber = -9999;
“person.prototype “对应的就是person构造出来所有实例的原型，也就是说”person.prototype “属于这些实例原型链的一部分，所以当这些实例进行属性查找时候，就会引用到”person.prototype “中的属性。
十、对象创建方式影响原型链
let july = {
name: "张三",
age: 28,
getinfo: function(){
console.log(`${this.name} is ${this.age} years old.`);
}
}
console.log(july.getinfo());
当使用这种方式创建一个对象的时候，原型链就变成下图了. july对象的原型是”object.prototype”也就是说对象的构建方式会影响原型链的形式。)
十一、总结
1.所有的对象都有__proto__属性，该属性 对应 该对象的原型.
2.所有的函数对象都有prototype属性，该属性的值会被赋值给该函数创建的实例对象的_proto_属性.
3.所有的原型对象都有constructor属性，该属性对应创建所有指向该原型的实例的构造函数.
4. 函数对象和原型对象通过prototype和constructor属性进行相互关联.
5. prototype属性可以给函数和对象添加共享(继承)的方法、属性，而__proto__是查找某函数或对象的原型链的方式。
如对本文有疑问， 点击进行留言回复！！
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
深入理解CSS background-blend-mode的作用机制
我要评论
网友评论