一、js手写call：隐式绑定改变this
Function.prototype.customCall = function (thisArg, ...args) {
// 1、获取被调用的函数
const fn = this; // 这里的this指向sum
// 2、绑定this，将thisArg转成对象类型（防止传入非对象类型）
thisArg = thisArg ? Object(thisArg) : window;
thisArg.fn = fn;
// 3、执行函数
const result = thisArg.fn(...args);
delete thisArg.fn;
// 4、返回执行结果
return result;
};
function sum (num1, num2) {
console.log('sum函数', this, num1, num2, num1 + num2); // sum函数 String{'abc', fn: ƒ} 10 20 30
return num1 + num2;
}
sum.customCall('abc', 10, 20);
二、js手写apply：隐式绑定改变this
Function.prototype.customapply = function (thisArg, args) {
// 1、获取被执行的函数
const fn = this; // 这里的this指向sum函数
// 2、绑定this
thisArg = thisArg ? Object(thisArg) : thisArg; // 处理thisArg为Number/null/undefined的情况
thisArg.fn = fn;
// 执行函数
const result = args ? thisArg.fn(...args) : thisArg.fn(); // args可能为undefined
delete thisArg.fn;
// 返回执行结果
return result;
};
function sum(num1, num2) {
console.log('sum被调用', this, num1, num2, num1 + num2); // sum被调用 String{'abc'} 10 20
return num1 + num2;
}
function sum1(num) {
console.log('sum1被调用', this, num); // sum1被调用 String{'abc', fn: ƒ} 10
return num;
}
function sum2() {
console.log('sum2被执行');
}
sum.customapply('abc', [10, 20]); // 隐式调用
sum1.customapply('abc', [10]);
sum2.customapply('abc');
三、js手写bind：隐式绑定改变this
Function.prototype.custombind = function (thisArg, ...args) {
// 1、获取被调用的函数
const fn = this;
// 2、绑定this
thisArg = thisArg ? Object(thisArg) : window;
const retFunc = function (...extraArgs) {
thisArg.fn = fn;
const result = thisArg.fn(...args, ...extraArgs); // 对两次传入的参数进行合并
delete thisArg.fn;
return result;
};
// 3、直接返回方法，且这个方法绑定了执行参数
return retFunc;
};
function sum(num1, num2) {
console.log('sum被调用了', this, num1, num2, num1 + num2);
return num1 + num2;
}
sum.custombind('abc', 10)(20);
另一种手写bind
Function.prototype.customBind = function() {
// 获取要被执行的函数
const fn = this;
// 获取this
let thisArg = Array.prototype.shift.call(arguments);
thisArg = thisArg ? Object(thisArg) : window; // 必须，要保证thisArg是个Object
// 获取参数
const args = Array.prototype.slice.call(arguments);
return function() {
const extraArgs = Array.prototype.slice.call(arguments);
// 绑定this
thisArg.fn = fn;
thisArg.fn(...args, ...extraArgs);
};
}
function sum (num1, num2) {
const result = num1 + num2;
console.log('sum被调用', this, num1, num2, result);
return result;
}
sum.customBind('abc', 10)(20); // sum被调用 String{'abc', fn: ƒ} 10 20 30
四、认识arguments：传递给函数的参数的类数组（array-like）对象
类数组对象：长的像一个数组，实际上是一个对象
1、拥有数组的一些特性，例如length、或可以通过index索引来访问
2、没有数组的一些方法，例如forEach、map等
// 认识arguments
function sum(num1, num2, num3) {
// 打印arguments
console.log(arguments); // Arguments(3)[1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 常见的对arguments的操作有三个：
// 1、获取参数长度
console.log(arguments.length); // 3
// 2、根据索引值获取某一个参数
console.log(arguments[0]); // 1
// 3、callee获取当前arguments所在的函数
console.log(arguments.callee); // function sum(num1, num2, num3) {}
}
sum(1, 2, 3);
// 类数组转数组
function sum(num1, num2, num3) {
// 方法一：自己遍历
// const newArr = [];
// for (let i = 0; i < arguments.length; i++) {
// newArr.push(arguments[i] * 2);
// }
// return newArr;
// 方法二：slice（借助slice内部的遍历）
// const newArr = Array.prototype.slice.call(arguments);
// 或
// const newArr = [].slice.call(arguments);
// return newArr;
// 方法三：ES6的from方法
// const arr = Array.from(arguments);
// return arr.map(v => v * 2);
// 方法四：展开运算符
const arr = [...arguments];
return arr.map(v => v * 2);
}
sum(1, 2, 3);
// 箭头函数中没有arguments，会去上层作用域找
const hello = () => {
// console.log(arguments); // arguments is not defined
};
const hi = function () {
const fn = () => {
console.log(arguments); // Arguments[123, callee: ƒ, Symbol(Symbol.iterator): ƒ]
};
return fn();
};
hello();
hi(123);
五、bind的一些面试题
bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值，例如：f.bind(obj)，实际上可以理解为obj.f()，这时f函数体内的this自然指向的是obj；
var a = {
b: function() {
var func = function() {
console.log(this.c);
}
func();
},
c: 'hello'
}
a.b(); // undefined 这里的this指向的是全局作用域
console.log(a.c); // hello
var a = {
b: function() {
var _this = this; // 通过赋值的方式将this赋值给that
var func = function() {
console.log(_this.c);
}
func();
},
c: 'hello'
}
a.b(); // hello
console.log(a.c); // hello
// 使用bind方法一
var a = {
b: function() {
var func = function() {
console.log(this.c);
}.bind(this);
func();
},
c: 'hello'
}
a.b(); // hello
console.log(a.c); // hello
// 使用bind方法二
var a = {
b: function() {
var func = function() {
console.log(this.c);
}
func.bind(this)();
},
c: 'hello'
}
a.b(); // hello
console.log(a.c); // hello
// 分析：这里的bind方法会把它的第一个实参绑定给f函数体内的this，所以里的this即指向{x:1}对象；
// 从第二个参数起，会依次传递给原始函数，这里的第二个参数2即是f函数的y参数；
// 最后调用m(3)的时候，这里的3便是最后一个参数z了，所以执行结果为1+2+3=6
// 分步处理参数的过程其实是一个典型的函数柯里化的过程（Curry）
function f(y,z){
return this.x+y+z;
}
var m = f.bind({x:1},2);
console.log(m(3)); // 6
// 分析：直接调用a的话，this指向的是global或window对象，所以会报错；
// 通过bind或者call方式绑定this至document对象即可正常调用
var a = document.write;
a('hello'); // error
a.bind(document)('hello'); // hello
a.call(document,'hello'); // hello
// 实现预定义参数
// 分析：Array.prototype.slice.call(arguments)是用来将参数由类数组转换为真正的数组；
function list() {
return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1,2,3]
// 第一个参数undefined表示this的指向，第二个参数10即表示list中真正的第一个参数，依次类推
var a = list.bind(undefined, 10);
var list2 = a(); // [10]
var list3 = a(1, 2, 3); // [10,1,2,3]
