fn.apply(thisArg[, argsArray])
Function.prototype.myApply = function (context, args) {
//第一个参数为null或者undefined时,this指向全局对象window;值为原始值时(例如fn.apply('hello')),this指向该原始值的自动包装对象,如 String、Number、Boolean
context = (context ?? window) || Object(context);
//第二个参数可以不传,但类型必须为数组或者类数组
if (args && !Array.isArray(args)) {
throw new Error('第二个参数必须为数组')
}
//为了避免函数名与上下文(context)的属性发生冲突,使用Symbol类型作为唯一值
const key = Symbol();
context[key] = this; // this === fn
const result = args ? context[key](...args) : context[key]();
//函数执行完成后删除该属性
delete context[key];
return result;
}
function sayHi(msg) {
console.log(this);
console.log(`Hi, ${this.name} ${msg}`);
}
sayHi.myApply(undefined) // window
sayHi.myApply(null) // window
sayHi.myApply(1) // Number
sayHi.myApply('11') // String
sayHi.myApply(true) // Boolean
sayHi.myApply({ name: 'yuyy' }, ['how old are you?'])
context = (context ?? window) || Object(context);
fn.call(thisArg[, arg1, arg2, ...])
Function.prototype.myCall = function (context, ...args) {
context = (context ?? window) || Object(context);
const key = Symbol();
context[key] = this;
const result = context[key](...args);
delete context[key];
return result
}
function sayHi(msg) {
console.log(`Hi, ${this.name} ${msg}`);
}
sayHi.myCall({ name: 'yuyy' }, 'how old are you?')
sayHi.myCall(null, 'how old are you?')
fn.bind(thisArg[, arg1[, arg2[, ...]]])
Function.prototype.myBind = function (context, ...args) {
const _self = this; // this指向原始函数
// 关键点1: 声明一个新函数
const newFn = function (...rest) {
return _self.call(context, ...args, ...rest)
}
// 关键点2: 补全原型对象(原始函数如果是箭头函数,没有原型对象,会导致new报错)
if (_self.prototype) {
newFn. = Object.create(_self.prototype)
}
return newFn
}
function sayHi(msg) {
console.log(`Hi, ${this.name} ${msg}`);
}
const newSayHi = sayHi.myBind({ name: 'yuyy' }, 'how old are you?')
newSayHi()
const newFn = function (...rest) {
return _self.call(context, ...args, ...rest)
}
if (_self.prototype) {
newFn.prototype = Object.create(_self.prototype)
}