一、相关资料
- JS原型链与继承别再被问倒了
- js构造函数详解
- 一步步图解javascript的原型(prototype)对象,原型链
- 进阶必读:深入理解 JavaScript 原型
- JS原型链简单图解
- JS 中 this 指向问题
- 通俗易懂之JavaScript手动实现apply方法
二、技术点
1.构造函数(constructor)
(1)构造函数与普通函数的区别
主要从功能上进行区别的,构造函数的主要功能为初始化对象,特点是和new 一起使用。new就是在创建对象,从无到有,构造函数就是在为初始化的对象添加属性和方法。
(2)构造函数例子
function Father(name) {
this.name = name
this.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,否则返回rel
return 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(){ //这是一个类的方法,注意千万不要加上function
return 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 //true
obj2.__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: undefined
const 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方法:myCall
const content = context || window; /* 若有传参,则为context;若无传参,则为window。
例如showName2.myCall(obj),则content就指向obj */
const fn = Symbol(); // 这里用Symbol类型(ES6新增基本类型)声明一个变量,确保独一无二,作为接下来给content新添加属性的key
content[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(); // 5
var 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()
方法。