JavaScript继承与原型链
JavaScript继承与原型链
当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（object）都有一个私有属性（称之为 __proto__）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（__proto__），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。
所有的JavaScript对象都是位于原型链顶端的Object()的实例。
基于原型链的继承
继承属性
JavaScript的对象是动态的，JavaScript的对象其实就是动态的变量属性的容器，也就是键值对的容器。每个JavaScript对象都有一个指向一个原型对象的链，当试图访问一个对象的属性时，浏览器会首先在该对象的键值对中寻找该属性，如果没有找到，就会沿着原型链搜寻，依次层层向上，直到找到该属性或者寻找到最顶端的Object()然后返回null。
尝试一下下面这段代码
let obj = function(){
this.a = 1;
this.b = 2;
}
let emp = new obj()
obj.prototype.b = 3
obj.prototype.c = 4
// a为emp自身的属性
console.log(emp.a);
// b为emp自身的属性
console.log(emp.b);
// c不是emp自身的属性，在原型链上搜寻
console.log(emp.c);
// c不是emp自身的属性，在原型链上搜寻
console.log(emp.d);运行结果，a和b都是emp自身的属性，因此可以找出。而c和d不是emp自身的属性，因此向上搜索原型链。给原型链上一层的原型设置了b=3和c=4，由于emp本身具有b属性，因此b的值依旧是2，然后再上一层的原型中找到了c，但是没有d属性，所以d返回的是undefined。
可以看看emp的原型链，体会一下
继承方法
JavaScript并没有其他面向对象语言所定义的方法。在JavaScript当中，任何函数都可以作为对象的属性，函数的继承与其他的属性继承没有区别，包括对属性的重写。
看看下面这段代码
let obj = {
num: 2,
func: function(){
return this.num;
}
}
// 调用obj的func
console.log(obj.func());
// 使用Object.create创建一个继承自obj的对象
let emp = Object.create(obj)
// 修改emp的num为3
emp.num = 3
// 调用emp的func
console.log(emp.func());运行结果如下，可以看到emp的num被重写了。
看看emp的原型链体会一下。当继承的函数被调用时，this指向的是当前对象，而不是原型对象，这点与一般的面向对象语言一直。
在JavaScript当中使用原型链
因为JavaScript是基于原型的，因此函数是允许拥有属性的，如图。所有的函数都有一个特别的属性——prototype。
我们可以给func0的原型链对象添加新的属性，如下。可以看到上一层的原型多出了一对属性。
那么我们如何给这个函数本身添加属性呢？我们通过新建一个基于func0原型的实例，然后添加一些属性到该原型对象当中。
创建对象和生成原型链
使用语法结构
var o = {a: 1};
// o 这个对象继承了 Object.prototype 上面的所有属性
// o 自身没有名为 hasOwnProperty 的属性
// hasOwnProperty 是 Object.prototype 的属性
// 因此 o 继承了 Object.prototype 的 hasOwnProperty
// Object.prototype 的原型为 null
// 原型链如下：
// o ---> Object.prototype ---> null
var a = ["yo", "whadup", "?"];
// 数组都继承于 Array.prototype
// (Array.prototype 中包含 indexOf, forEach 等方法)
// 原型链如下：
// a ---> Array.prototype ---> Object.prototype ---> null
function f(){
return 2;
}
// 函数都继承于 Function.prototype
// (Function.prototype 中包含 call, bind 等方法)
// 原型链如下：
// f ---> Function.prototype ---> Object.prototype ---> null使用构造器
function Graph() {
this.vertices = [];
this.edges = [];
}
Graph.prototype = {
addVertex: function(v){
this.vertices.push(v);
}
};
var g = new Graph();
// g 是生成的对象，他的自身属性有 'vertices' 和 'edges'。
// 在 g 被实例化时，g.[[Prototype]] 指向了 Graph.prototype。使用Object.create()
var a = {a: 1};
// a ---> Object.prototype ---> null
var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (继承而来)
var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null
var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined，因为 d 没有继承 Object.prototype使用class关键字
CMAScript6引入了一套新的关键字用来实现 class。使用基于类语言的开发人员会对这些结构感到熟悉，但它们是不同的。JavaScript仍然基于原型。这些新的关键字包括 class、constructor、static、extends和super。
"use strict";
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
}
get area() {
return this.height * this.width;
}
set sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
var square = new Square(2);性能
大多数情况下，我们只需要对象本身的属性而不需要原型链上的属性。同时，在原型链上查找属性比较耗时，在试图访问不存在的属性时还会遍历整个原型链，对性能有副作用，这在性能要求苛刻的情况下很重要。因此我们需要一种方法来实现检查对象是否具有自己定义的属性，我们可以使用从Object.prototype继承的hasOwnProperty (en-US)方法。这是 JavaScript 中唯一一个处理属性并且不会遍历原型链的方法。
下面的实例运行分别为true、true、false、true。
class person {
constructor() {
this.name = "Jack";
this.age = 20;
}
}
person.prototype.gender = "male"
let emp = new person()
console.log(emp.hasOwnProperty("name"));
console.log(emp.hasOwnProperty("age"));
console.log(emp.hasOwnProperty("gender"));
console.log(emp.__proto__.hasOwnProperty("gender"));prototype与Object.getPrototypeOf
prototype 是用于类的，而 Object.getPrototypeOf() 是用于实例的（instances），两者功能一致。
尝试下面这一小段代码。输出结果为male、male。
class person {
constructor() {
this.name = "Jack";
this.age = 20;
}
}
person.prototype.gender = "male"
let emp = new person()
console.log(Object.getPrototypeOf(emp).gender);
console.log(person.prototype.gender);像上面的例子中，如果你执行 let emp = new person() 那么 emp.gender 事实上会指向 Object.getPrototypeOf(emp).gender，它就是你在 person.prototype.gender 中定义的内容。也就是说：Object.getPrototypeOf(emp).gender == person.prototype.gender。
综上，当执行下面代码时
let emp = new person()就等同于执行
let emp = new Object();
emp.__proto__ = person.prototype;同理，当执行寻找某属性代码时
emp.gender首先会查找emp是否有该属性，没有的话查找Object.getPrototypeOf(emp).gender，如果仍旧没有，它会继续查找 Object.getPrototypeOf(Object.getPrototypeOf(emp)).gender，直到找到该属性或者溯源到原型链顶端。
腾讯云开发者
