js 原型相关知识点总结

一、相关资料

JS原型链与继承别再被问倒了
js构造函数详解
一步步图解javascript的原型(prototype)对象,原型链
进阶必读：深入理解 JavaScript 原型
JS原型链简单图解
JS 中 this 指向问题
通俗易懂之JavaScript手动实现apply方法

二、技术点

1.构造函数（constructor）

（1）构造函数与普通函数的区别

主要从功能上进行区别的，构造函数的主要功能为初始化对象，特点是和new 一起使用。new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。

（2）构造函数例子

function Father(name) {this.name = namethis.sayWorld = function () {console.log(`Hello ${this.name}!`)}
}Father.prototype.getName = function(){return this.name
}

（3）对new的理解

new 申请内存, 创建对象,当调用new时，后台会隐式执行new Object()创建对象。所以，通过new创建的字符串、数字是引用类型，而是非值类型。

（4）手写new函数

function myNew(constructFunction, ...args) {// 先用Object创建一个空的对象,const obj = Object.create(null)// 继承目标函数的原型obj.__proto__ = constructFunction.prototype// 改变this指向const res = constructFunction.apply(obj, args)// const res = constructFunction.call(obj, ...args)//正常规定,如何fn返回的是null或undefined(也就是不返回内容),我们返回的是obj,否则返回relreturn res instanceof Object ? res : obj
}const fa1 = myNew(Father, '小明')
fa1.sayWorld()

（5）ES6 中 class 与构造函数的关系

class 为构造函数的语法糖，即 class的本质是构造函数。class 的继承 extends 本质为构造函数的原型链的继承。

类的写法

class Person{  //定义一个名字为Person的类constructor(name,age){ //constructor是一个构造方法，用来接收参数this.name = name;  //this代表实例对象this.age = age;}say(){  //这是一个类的方法，注意千万不要加上functionreturn   this.name + this.age}
}var obj = new Person('老铁'，18);
console.log(obj.say());

构造函数的写法

function Person(name,age){  if(!(this instanceof Person)){ //避免使用者不小心讲Person当作普通函数执行throw new Error(''请使用 new Person"); //仿ES6 class 中的写法}this.name = name;this.age = age;
}
Person.prototype.say = function(){return   this.name + this.age
}var obj = new Person('老铁'，18);   //通过构造函数创建对象，必须使用new运算符
console.log(obj.say());

2.原型对象(prototype)

function CreateObj(uName) {this.userName = uName;}CreateObj.prototype.showUserName = function(){return this.userName;}var obj1 = new CreateObj('ghostwu');var obj2 = new CreateObj('卫庄');

（1）每个函数都有一个原型属性(prototype) ，这个属性是一个指针，指向构造函数的原型对象( CreateObj.prototype)。

（2）在默认情况下，所有原型对象都会自动获得一个constructor属性，该属性包含一个指向prototype属性所在的函数。

（3）所有的实例( 通过构造函数new出来的，原型对象[ 如CreateObj.prototype]等)都包含一个隐式原型(__proto__)，该指针指向实例的构造函数的原型对象,

obj1.__proto__ === CreateObj.prototype //trueobj2.__proto__ === CreateObj.prototype //true

（4）当一个的对象访问属性和方法的时候，她的访问规则叫（就近原则），规则如下：

当实例上面，存在属性或者方法时，直接用实例上面的。
如果实例上面不存在属性和方法，就会沿着实例的__proto__指针指向的原型对象继续往上查找，如果找不到，值就是undefined。

原型链

所有的实例（包括原型对象）都有一个隐式原型__proto__,CreateObj.prototype.__proto__指向的是Object.prototype, 通过全等运算符 (===) 测试之后为true。

这就是原型链，通过隐式原型把一些构造函数层层的串起来。

构造函数,原型和实例的关系图如下：

每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针。

图解构造器Function和Object的关系:

//①构造器Function的构造器是它自身
Function.constructor=== Function;//true//②构造器Object的构造器是Function（由此可知所有构造器的constructor都指向Function）
Object.constructor === Function;//true//③构造器Function的__proto__是一个特殊的匿名函数function() {}
console.log(Function.__proto__);//function() {}//④这个特殊的匿名函数的__proto__指向Object的prototype原型。
Function.__proto__.__proto__ === Object.prototype//true//⑤Object的__proto__指向Function的prototype，也就是上面③中所述的特殊匿名函数
Object.__proto__ === Function.prototype;//true
Function.prototype === Function.__proto__;//true

3.this指向

口诀：箭头函数、new、bind、apply 和 call、欧比届点（obj.）、直接调用、不在函数里。

(1).箭头函数

要点：

创建箭头函数时，就已经确定了它的 this 指向。
箭头函数内的 this 指向外层的 this。

(2).new

要点：

当使用 new 关键字调用函数时，函数中的this 一定是JS创建的新对象。
箭头函数不能当做构造函数，所以不能与 new 一起执行。

(3).bind

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

const module = {x: 42,getX: function() {return this.x;}
};const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefinedconst boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

要点：

多次bind 时只认第一次的 bind 的值

function func() {console.log(this)
}func.bind(1).bind(2)() // 1

箭头函数中 this 不会被修改

func = () => {// 这里 this 指向取决于外层 this，参考口诀 7 「不在函数里」console.log(this)
}func.bind(1)() // Window，口诀 1 优先

bind 与 new

function func() {console.log(this, this.__proto__ === func.prototype)
}boundFunc = func.bind(1)
new boundFunc() // Object true，口诀 2 优先

(4).apply 和 call

apply() 和 call() 的第一个参数都是 this，区别在于通过 apply 调用时实参是放到数组中的，而通过 call 调用时实参是逗号分隔的。

代码实现 `apply` 方法

function myApply(obj){const target = obj || window;const fn = Symbol['fn'];target[fn] = this;const para = arguments[1] || [];const result = target[fn](...para);delete target[fn];return result;
}/*** 测试myApply ***/
Function.prototype.myApply = myApply;
function printName(para1,para2){console.log(this.name,para1,para2);
}
var obj1 = {name:'tom'};
printName.myApply(obj1,['good','boy']); // 输出tom good boy

代码实现 `call` 方法

Function.prototype.myCall = function(context){// 在 Function 构造函数的原型上添加我们自己的call方法：myCallconst content = context || window; /* 若有传参，则为context；若无传参，则为window。例如showName2.myCall(obj)，则content就指向obj */const fn = Symbol(); // 这里用Symbol类型(ES6新增基本类型)声明一个变量，确保独一无二，作为接下来给content新添加属性的keycontent[fn] = this; /* 这里的this，谁调用myCall方法，指的就是谁。例如showName2.myCall(obj)，执行完这行代码，即给obj新增了一个fn属性，值为showName2函数 */const result = content.fn(...Array.from(arguments).slice(1)); /* 通过content.fn()方式调用方法，this被绑定为content即obj。把参数传递进去就可以了，...是ES6的扩展运算符，Array.from()也是ES6语法，把类数组对象转为数组，因为第一个参数是this，所以把它剥掉 */delete content[fn]; // 删除添加的临时属性return result;
}var showName2 = function() { // ES5中函数声明方式console.log(this.name);
};showName2.myCall(obj); // 输出'Bob'

要点：

箭头函数中 this 不会被修改。

func = () => {// 这里 this 指向取决于外层 this，参考口诀 7 「不在函数里」console.log(this)
}func.apply(1) // Window，口诀 1 优先

bind 函数中 this 不会被修改。

function func() {console.log(this)
}boundFunc = func.bind(1)
boundFunc.apply(2) // 1，口诀 3 优先

(5).欧比届点（obj.）

function func() {console.log(this.x)
}obj = { x: 1 }
obj.func = func
obj.func() // 1

(6).直接调用

在函数不满足前面的场景，被直接调用时，this 将指向全局对象。在浏览器环境中全局对象是 Window，在 Node.js 环境中是 Global。

function func() {console.log(this)
}func() // Window

function outerFunc() {console.log(this) // { x: 1 }function func() {console.log(this) // Window}func()
}outerFunc.bind({ x: 1 })()

(7).不在函数里

不在函数中的场景，可分为浏览器的 <script /> 标签里，或 Node.js 的模块文件里。

在 <script /> 标签里，this 指向 Window。
在 Node.js 的模块文件里，this 指向 Module 的默认导出对象，也就是 module.exports

4.继承

(1). 经典继承（借用构造函数）

原型链有两个问题

问题一: 当原型链中包含引用类型值的原型时,该引用类型值会被所有实例共享;问题二: 在创建子类型(例如创建Son的实例)时,不能向超类型(例如Father)的构造函数中传递参数.

基本思想

基本思想:即在子类型构造函数的内部调用超类型构造函数.

代码示例

function Father(){this.colors = ["red", "yellow", "green"];
}
function Son (){Father.call(this); //继承了Father,且向父类型传递参数
}var instance1 = new Son();
instance1.colors.push("black");
console.log(instance1.colors); // "red,yellow,green,black"var instance2 = new Son();
console.log(instance2.colors); // "red,yellow,green" 可见引用类型值是独立的

(2). 组合继承

采用经典继承有个问题

仅仅借用构造函数,那么将无法避免构造函数模式存在的问题--方法都在构造函数中定义, 因此函数复用也就不可用了.而且超类型(如Father)中定义的方法,对子类型而言也是不可见的. 考虑此,借用构造函数的技术也很少单独使用.

基本思想

基本思想:使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承.

代码示例

function Father(name){this.name = name;this.colors = ["red", "yellow", "green"];
};
Father.prototype.sayName = function(){alert(this.name);
};
function Son (name, age){Father.call(this, name); //继承实例属性，第一次调用Father()this.age = age;
}
Son.prototype = new Father(); // 继承父类方法,第二次调用Father()
Son.prototype.sayAge = function(){alert(this.age);
}var instance1 = new Son("louis",5);
instance1.colors.push("black");
console.log(instance1.colors); // "red,yellow,green,black"
instance1.sayName(); // louis
instance1.sayAge(); // 5var instance2 = new Son("zhai", 10);
console.log(instance2.colors); // "red,yellow,green" 可见引用类型值是独立的
instance2.sayName(); // "zhai"
instance2.sayAge(); // 10

(3). 原型继承

基本思想

在object()函数内部, 先创建一个临时性的构造函数, 然后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型的一个新实例.

引发问题

从本质上讲, object() 返回了一个引用传入对象的新对象. 这样可能带来一些共享数据的问题

代码示例


function object(o){function F(){};F.prototype = o;return new F();
}var Person = {friends: ["Van", "Louis", "Nick"]
};var anotherPerson = object(person);
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.friends.push("Style");
alert(person.friends); // "Van,Louis,Nick,Rob,Style"

优化

ES5中，新增object.create()方法规范了上面的原型式继承

object.create() 接收两个参数:

一个用作新对象原型的对象
(可选的)一个为新对象定义额外属性的对象

var person = {friends : ["Van","Louis","Nick"]
};
var anotherPerson = Object.create(person);
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.friends.push("Style");
alert(person.friends);//"Van,Louis,Nick,Rob,Style"

(4). 寄生继承

基本思想

寄生式继承的思路与(寄生)构造函数和工厂模式类似, 即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象. 如下.

代码示例


function createAnother(original){var clone = object(original);//通过调用object函数创建一个新对象clone.sayHi = function(){//以某种方式来增强这个对象alert("hi");};return clone;//返回这个对象
}

这个例子中的代码基于person返回了一个新对象--anotherPerson. 新对象不仅具有 person 的所有属性和方法, 而且还被增强了, 拥有了sayH()方法.

(5). 寄生组合式继承

采用组合继承有个问题

组合继承最大的问题就是无论在什么情况下，都会调用两次弗雷构造函数，一次是在创建子类原型的时候，另一次是在子类型构造函数内部。

基本思想

不必为了指定子类型的原型而调用超类型的构造函数。

代码示例

function extend(subClass,superClass){var prototype = object(superClass.prototype);//创建对象prototype.constructor = subClass;//增强对象subClass.prototype = prototype;//指定对象
}

extend的高效率体现在它没有调用superClass构造函数,因此避免了在subClass.prototype上面创建不必要,多余的属性. 于此同时,原型链还能保持不变; 因此还能正常使用 instanceof 和 isPrototypeOf() 方法。