是什么
Function对象原型方法,用于改变函数运行时this的指向
- call apply
立即执行原函数,改变一次this指向
call接收参数列表,apply接收参数数组 - bind
返回一个函数,这个函数运行后永久改变这个新函数this指向
Function.prototype.call()
Function 实例的 call() 方法会以给定的 this 值和逐个提供的参数调用该函数。
例子
let name = 'abhd'
function greet(greeting) {
console.log("this::",this);
console.log(greeting + ', ' + this.name );
}
const person = {
name: 'Alice'
};
greet.call(person, 'Hello'); // this:: {name: 'Alice'} Hello, Alice
greet("hello") // this:: window hello, undefined
手写call
function greet(greeting) {
console.log("this::",this);
console.log(greeting + ', ' + this.name );
}
const person = {
name: 'Alice'
};
//手写
Function.prototype.mycall= function (obj, ...args) {
//1.判断调用者是否是函数
if(typeof this !== 'function')
{
throw new TypeError('not a function')
}
//2.判断是否传入this的上下文obj,未传入就用全局对象
obj = obj || window
//3.利用obj来调用函数,这样函数内部的this就指向了obj
const fn=Symbol()
obj[fn]=this
const res=obj[fn](...args)
delete obj[fn]
//4.返回
return res
}
//test
greet.mycall(person, 'Hello'); // this:: {name: 'Alice'} Hello, Alice
greet(); // this:: window hello, undefined
Function.prototype.apply()
Function实例的 apply() 方法会以给定的 this 值和作为数组（或类数组对象）提供的 arguments 调用该函数。
例子
let name= 'abhd'
function greet(greeting) {
console.log("this::",this);
console.log(greeting + ', ' + this.name );
}
const person = {
name: 'Alice'
};
greet.apply(person,["hello"]) //this:: { name: 'Alice' } hello, Alice
greet("hello")//this::window hello, undefined
手写
let name= 'abhd'
function greet(greeting) {
console.log("this::",this);
console.log(greeting + ', ' + this.name );
}
const person = {
name: 'Alice'
};
//手写
Function.prototype.myApply= function (obj, myarray) {
//1.判断调用者是否是函数
if(typeof this !== 'function')
{
throw new TypeError('not a function')
}
//2.判断是否传入this的上下文obj,未传入就用全局对象
obj = obj || window
//3.利用obj来调用函数,这样函数内部的this就指向了obj
const fn=Symbol()
obj[fn]=this
const res=obj[fn](...myarray)
delete obj[fn]
//4.返回
return res
}
greet.myApply(person,['hello']) // this:: { name: 'Alice' } hello, Alice
greet('hello') // this:: window hello, undefined
Function.prototype.bind()
Function实例的 bind() 方法创建返回一个新函数，
当调用该新函数时，它会调用原始函数并将其 this关键字设置为给定的值，同时，还可以传入一系列指定的参数，这些参数会插入到调用新函数时传入的参数的前面。
返回了一个新的函数，这个函数的this指向被永久改变了
例子
// 测试
let name = 'abhd'
const obj = {
name: 'Alice',
};
function greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`);
}
greet('Hello','!')// Hello,undefined!
const newFn = greet.bind(obj, 'Hello');
newFn('!'); // Hello, Alice!
//永久改变了this指向吗
// 没有永久改变this指向，只是返回了一个新的函数，这个函数的this指向被永久改变了
greet('Hello','!')// Hello,undefined!
手写
// 测试
let name = 'abhd'
const obj = {
name: 'Alice',
};
function greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`);
}
//手写
Function.prototype.myBind = function (obj, ...args) {
//1.保存原函数
const that = this
//2.返回新函数
return function(...newArgs){
return that.apply(obj,args.concat(newArgs))
}
}
greet('Hello','!')// Hello,undefined!
const newFn = greet.myBind(obj, 'Hello');
newFn('!'); // Hello, Alice! undefined
