(1)call 和 apply 的功能相同,区别在于传参的方式不一样:
fn.call() 具有一个指定的this值和分别地提供的参数(参数的列表)。
fn.apply()具有一个指定的this值,以及作为一个数组(或类数组对象)提供的参数。
(2)call,aplly和bind的模拟实现
call代码实现
Function.prototype.call=function(context){
/** 如果第一个参数传入的是 null 或者是 undefined, 那么指向this指向 window/global */
/** 如果第一个参数传入的不是null或者是undefined, 那么必须是一个对象 */
if(!context){
context = typeof window === 'undefined' ?global:window
}
console.log(this)
// 这里的context---foo对象
context.fn = this; //将bar函数挂在到当前传入的对象的一个方法上
// this--bar函数
let rest = [...arguments].slice(1) //获取参数
let result = context.fn(...rest) //执行方法,传入剩余的参数
delete context.fn; //删除挂载的方法
return result; //返回结果
}
var foo = {
name: 'Selina'
}
var name = 'Chirs';
function bar(job, age) {
console.log(this.name);
console.log(job, age);
}
bar.call(foo,'cccc',20)
apply代码实现(apply的第二个参数是数组或类数组)
Function.prototype.apply = function(context,rest){
if(!context){
context = typeof window==='undefined' ?global:window
}
context.fn = this
let result
if(rest === undefined || rest === null){
result = context.fn(rest)
}else if(typeof rest === 'object'){
result = context.fn(...rest)
}
delete context.fn
return result
}
bind代码实现
Function.prototype.myBind = function(context){ //context = {name: "Yvette"}
if(typeof this !=='function'){
throw new TypeError('not a function')
}
const me = this //me = ƒ person(age, job, gender)
const args = [...arguments].slice(1)
return function F(){
// 判断是否用作构造函数
if(this instanceof F){
console.log('5555')
return new me(...args, ...arguments)
}
console.log('88888')
// 用作普通函数
return me.apply(context, args.concat(...arguments))
}
}
var name = 'Jack';
function person(age, job, gender){
console.log(this.name , age, job, gender);
}
var Yve = {name : 'Yvette'};
let result = person.myBind(Yve, 22, 'enginner')('female');
第一遍代码走到return,并没有执行return里面的代码,而是再次走到了如图所示。说明bind此时返回的是一个函数,如果想要执行代码,必须是函数的调用
第二遍代码进入return的内部
接着向下执行