new、call、apply、bind实现的原理，是你理解的那样吗？

前言

在项目开发过程中，对于函数封装时，在调用函数内部方法时，有可能是window调用这时就会报错，常使用

call

，

apply

，

bind

来绑定

this

指向。

new的实现

当我们用new实例化一个构造函数，生成一个实例对象时，你想知道

new

到底做了什么吗？ 来，客官里边请！
其实，它做了五件事：

1. 获取构造函数
2. 创建一个新对象
3. 将函数的作用域赋给新对象（这里实际上就是生产了一个新的上下文）
4. 执行函数中的代码（为新对象添加属性、方法）
5. 返回值，无返回值或者返回一个非对象值时，则将创建的新对象返回，否则会将返回值作为新对象返回。（也就是说一定会返回一个对象）

function MyNew() {
let Constructor = Array.prototype.shift.call(arguments); // 1：取出构造函数

let obj = {} // 2：执行会创建一个新对象

obj.__proto__ = Constructor.prototype // 3：该对象的原型等于构造函数prototype

var result = Constructor.apply(obj, arguments) // 4： 执行函数中的代码

return typeof result === 'object' ? result : obj // 5： 返回的值必须为对象
}

New方法校验

function Man(name, age) {
this.name = name
this.age = age
}
var tom = new Man('tom', 20)
var mike = MyNew(Man, 'mike', 30)
console.log(tom  instanceof Man, mike instanceof Man) // true true

call的实现

call方法的实现分为三步（比如：

fn.call(obj, a, b)

）

• 把调用函数fn的上下文指向obj
• 形参a,b等是以逗号分隔传进去
• 执行函数fn，并返回结果

Function.prototype.myCall = function (context) {
context = context ? Object(context) : window
context.fn = this // 重置上下文
let args = [...arguments].slice(1) // 截取参数a,b
let r = context.fn(...args) // 执行函数
delete context.fn // 删除属性，避免污染
return r // 返回结果
}

Call方法校验

// 浏览器环境下
var a = 1, b = 2;
var obj ={a: 10,  b: 20}
function test(key1, key2){
console.log(this[key1] + this[key2])
}
test('a', 'b') // 3
test.myCall(obj, 'a', 'b') // 30

apply的实现

apply

方法和

call

方法大同小异，唯一差别就是，

apply

传入的参数是数组格式。

// apply 原理
Function.prototype.myApply = function (context) {
context = context ? Object(context) : window
context.fn = this
let args = [...arguments][1]
if (!args) {
return context.fn()
}
let r = context.fn(...args)
delete context.fn;
return r
}

apply方法校验

// 浏览器环境下
var a = 1, b = 2;
var obj ={a: 10,  b: 20}
function test(key1, key2){
console.log(this[key1] + this[key2])
}
test('a', 'b') // 3
test.myCall(obj, ['a', 'b']) // 30  注意这里是传入数组 ['a', 'b']

bind方法实现

bind

方法和

call

、

apply

方法的差别是，他们都改变了上下文，但是

bind

没有立即执行函数。

// bind 原理
Function.prototype.Mybind = function (context) {
let _me = this
return function () {
return _me.apply(context)
}
}

bind方法校验

var a = 1, b = 2;
var obj ={a: 10,  b: 20}
function test(key1, key2){
console.log(this[key1] + this[key2])
}
var fn = test.bind(obj)
fn('a', 'b') // 30

• 点赞
• 收藏
• 分享
• 文章举报

Greenhand_BN 发布了14 篇原创文章 · 获赞 1 · 访问量 422 私信 关注