module1-04-实现 new、apply、call、bind 的底层逻辑
-
apply、call、bind在前端代码开发中非常重要,在很多时候,可以通过这些来节约内存。这些包括new都与this的指向密切相关。所以必须要了解这些方法
-
思考题:
-
-
② apply、call、bind这三个方法之间有什么区别?
-
③ 怎么样实现一个apply或者call的方法?
-
一、new
-
这个的关键词主要作用是执行一个构造函数,
-
这个结果比较简单相信大家都知道,接下来用一段代码来过
function Person() {
this.name = 'Jack';
}
var p = new Person();
console.log(p.name) // Jack
(1)new在生成实例过程中分几个步骤呢?
-
① 创建一个新对象
-
② 将构造函数的作用于赋予新对象(this指向新对象)
-
③ 执行构造函数中的代码(为这个新对象添加属性)
-
④ 返回新对象
(2)如果去掉new会怎么样的?
-
去掉new就像我们普通使用的函数一看,返回值返回什么就是什么,而且this指向的是window
-
如:
function Person(){
this.name = 'Jack';
}
var p = Person();
console.log(p) // undefined
console.log(name) // Jack
console.log(p.name) // 'name' of undefined
-
可以看出不使用new的话就会把this指向window,并且在window添加属性
(3)当函数有返回值的话呢?
function Person(){
this.name = 'Jack';
return {age: 18}
}
var p = new Person();
console.log(p) // {age: 18}
console.log(p.name) // undefined
console.log(p.age) // 18
-
用一段代码感受一下
-
当return出来的是一个和this无关的对象的时候,new会直接返回这个新对象,而不是它通过new执行步骤生成的this对象
-
这里要求构造函数必须返回的是一个对象,如果不是对象,还是会按照new的实现步骤,返回新生成的对象
-
如
-
function Person(){
this.name = 'Jack';
return 'tom';
}
var p = new Person();
console.log(p) // {name: 'Jack'}
console.log(p.name) // Jack
-
即使有了return,也还是执行new的操作
(4)自己实现的new
function _new(ctor,
二、apply & call & bind 原理介绍
-
先来了解一下这三个方法的基本情况,call、apply、bind是挂在Function对象上的三个方法,调用这三个方法的必须是一个函数
-
这三种方法的基本语法
func.call(thisArg, param1, param2,
-
这三个方法共有的作用就是,都可以改变func的this指向,call和apply的区别在于传入的参数不同
-
apply需要的是数组
-
call传入的是参数列表
-
-
而bind的区别就是在于它不会立刻执行函数
-
结合一段代码感受一下
-
let a = {
name: 'jack',
getName: function(msg) {
return msg + this.name;
}
}
let b = {
name: 'lily'
}
console.log(a.getName('hello~')); // hello~jack
console.log(a.getName.call(b, 'hi~')); // hi~lily
console.log(a.getName.apply(b, ['hi~'])) // hi~lily
let name = a.getName.bind(b, 'hello~');
console.log(name()); // hello~lily
(1)应用场景
-
比如判断数据类型的时候,借用Object.prototyoe的toString方法
-
类数组项进行数组操作的时候借用数组的方法
-
获取最大最小值(Math的方法)
-
继承中改变this执行
(2)apply和call的实现
-
因为两个基本相像所以放在一起,主要通过eval来实现的
Function.prototype.myCall = function (content,
(3)bind的实现
-
基本思路与apply和call一样,但是这里最后返回的结果不同
Function.prototype.myBind = function (content, ...args) { if (typeof this !== 'function') throw 'this must be a function'; // 必须是一个函数 const self = this; // 将这个函数的this指向保存在self const fbind = function () { self.apply(this instanceof self ? this : content, Array.prototype.concat.apply(args, arguments)); } // 定义的这个新函数里面执行的就是一个apply, self中的函数执行,然后在这过程中改变this指向为content if (this.prototype) Reflect.setPrototypeOf(fbind, this.prototype); // 将原型对象赋予给fbind return fbind; }
(4)总结
-
用一张图来表示