浅谈JS的原型和继承

参考文献

JavaScript原型与继承的秘密

__proto__

除null和undefined，JS中的所有数据类型都有这个属性； 它表示当我们访问一个对象的某个属性时，如果该对象自身不存在该属性， 就从它的__proto__属性上继续查找，以此类推，直到找到，若找到最后还是没有找到，则结果为undefined

我们把一个对象的__proto__属性所指向的对象叫该对象的原型；我们可以修改一个对象的原型来让这个对象拥有某种属性或某个方法

// 修改一个Number类型的值的原型const num = 1;num.__proto__.name = "My name is 1";console.log(num.name); // My name is 1 // 修改一个对象的原型const obj = {};obj.__proto__.name = "dreamapple";console.log(obj.name); // dreamapple

需注意的是，__proto__属性虽多数浏览器支持，但其实它仅在ECMAScript 2015规范中才被准确定义， 目的是为了给这个传统的功能定制一个标准，以确保浏览器间的兼容性。通过使用__proto__属性来修改一个对象的原型非常慢且影响性能。 所以，若想获取一个对象的原型，推荐用Object.getPrototypeOf 或Reflect.getPrototypeOf，设置一个对象的原型推荐用Object.setPrototypeOf或Reflect.setPrototypeOf

prototype

首先要记住的是，该属性一般只存在于函数对象上； 只要是能作为构造器的函数，都包含这个属性。即只要这个函数能通过new生成一个新对象， 那么这个函数肯定具有prototype属性。因为我们自定义的函数都可通过new生成一个对象，所以我们自定义的函数都有prototype 这个属性

// 函数字面量console.log((function(){}).prototype); // {constructor: ƒ} // Date构造器console.log(Date.prototype); // {constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …} // Math.abs 不是构造器，不能通过new操作符生成一个新的对象，所以不含有prototype属性console.log(Math.abs.prototype); // undefined

prototype属性有什么作用呢？作用就是：函数通过new生成的一个对象， 这个对象的原型(__proto__)指向该函数的prototype属性：

// 其中F表示一个自定义的函数或者是含有prototype属性的内置函数new F().__proto__ === F.prototype // true // 通过函数字面量定义的函数的__proto__属性都指向Function.prototype(function(){}).__proto__ === Function.prototype // true // 通过对象字面量定义的对象的__proto__属性都是指向Object.prototype({}).__proto__ === Object.prototype // true // Object函数的原型的__proto__属性指向nullObject.prototype.__proto__ === null // true // 因为Function本身也是一个函数，所以Function函数的__proto__属性指向它自身的prototypeFunction.__proto__ === Function.prototype // true // 因为Function的prototype是一个对象，所以Function.prototype的__proto__属性指向Object.prototypeFunction.prototype.__proto__ === Object.prototype // true