标签：not 如何 合并数组 invoke erro concat == 核心 func
this的灵活性让编程困难了许多，因此需要一些方法把this给固定下来。
函数实例的call可以指定函数内部this的指向。
var obj = {};
var f = function () {
return this;
};
f() === window // true 全局环境下运行（不指定this指向），this指向window
f.call(obj) === obj // true 用call将this指定到obj，在obj作用域运行
call()的参数应当是一个对象。若留空、null、undefined则是全局对象。
若call的参数是原始值，那么原始值会自动转换成包装对象后传入call。
var f = function () {
return this;
};
f.call(5) // Number {[[PrimitiveValue]]: 5}
// 5不是对象，会被自动转成包装对象（Number的实例），绑定f内部的this。
call方法第一个参数之后的参数则是函数调用时所需的参数。
function add(a, b) {
return a + b;
}
add.call(this, 1, 2) // 3
call()还可以用来调用对象的原生方法。
var obj = {};
obj.hasOwnProperty(‘toString‘) // false
// 覆盖掉继承的 hasOwnProperty 方法
obj.hasOwnProperty = function () {
return true;
};
obj.hasOwnProperty(‘toString‘) // true
Object.prototype.hasOwnProperty.call(obj, ‘toString‘) // false
//call方法将hasOwnProperty方法在Object上的原始定义放到obj对象上执行，这样无论obj上有没有同名方法，都不会影响结果。
Function.prototype.imitateCall = function (context) {
// 赋值作用域参数，如果没有则默认为 window，即访问全局作用域对象
context = context || window;
// 绑定调用函数（.call之前的方法即this，前面提到过调用call方法会调用一遍自身，所以这里要存下来）
context.invokeFn = this;
// 截取要传入的的参数
let args = [...arguments].slice(1);
// 执行调用函数，记录拿取返回值
let result = context.invokFn(...args);
// 销毁调用函数，以免作用域污染
Reflect.deleteProperty(context, ‘invokFn‘);
return result
}
apply()和call()的作用一样，唯一的区别是它接收一个数组作为函数执行时的参数。
传入数组的所有成员依次作为参数，传入原函数。原函数的参数，在call方法中必须一个个添加，但是在apply方法中，必须以数组形式添加。
function f(x, y){
console.log(x + y);
}
f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2
利用好这个特性完成进行一些有趣的任务。
1、合并两个数组
var vegetables = [‘parsnip‘, ‘potato‘];
var moreVegs = [‘celery‘, ‘beetroot‘];
// 将第二个数组融合进第一个数组
// 相当于 vegetables.push(‘celery‘, ‘beetroot‘);
Array.prototype.push.apply(vegetables, moreVegs);
// 4
vegetables;
// [‘parsnip‘, ‘potato‘, ‘celery‘, ‘beetroot‘]
当第二个数组(如示例中的 moreVegs )太大时不要使用这个方法来合并数组，因为一个函数能够接受的参数个数是有限制的。不同的引擎有不同的限制，JS核心限制在 65535，有些引擎会抛出异常，有些不抛出异常但丢失多余参数。
如何解决呢？方法就是将参数数组切块后循环传入目标方法
function concatOfArray(arr1, arr2) {
var QUANTUM = 32768;
for (var i = 0, len = arr2.length; i < len; i += QUANTUM) {
Array.prototype.push.apply(
arr1,
arr2.slice(i, Math.min(i + QUANTUM, len) )
);
}
return arr1;
}
// 验证代码
var arr1 = [-3, -2, -1];
var arr2 = [];
for(var i = 0; i < 1000000; i++) {
arr2.push(i);
}
Array.prototype.push.apply(arr1, arr2);
// Uncaught RangeError: Maximum call stack size exceeded
concatOfArray(arr1, arr2);
// (1000003) [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ...]
2、获取数组中的最大值和最小值
var numbers = [5, 458 , 120 , -215 ];
Math.max.apply(Math, numbers); //458
Math.max.call(Math, 5, 458 , 120 , -215); //458
// ES6
Math.max.call(Math, ...numbers); // 458
实现
Function.prototype.imitateApply = function (context) {
// 赋值作用域参数，如果没有则默认为 window，即访问全局作用域对象
context = context || window
// 绑定调用函数（.call之前的方法即this，前面提到过调用call方法会调用一遍自身，所以这里要存下来）
context.invokFn = this
// 执行调用函数，需要对是否有参数做判断，记录拿取返回值
let result
if (arguments[1]) {
result = context.invokFn(...arguments[1])
} else {
result = context.invokFn()
}
// 销毁调用函数，以免作用域污染
Reflect.deleteProperty(context, ‘invokFn‘)
return result
}
bind()与上面两个不一样，它把this绑定到某个对象后，会返回一个新函数。
每调用一次bind，就会生成一个新函数。
var counter = {
count: 0,
inc: function () {
this.count++;
}
};
var func = counter.inc.bind(counter);
func();
counter.count // 1
var obj = {
count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101
bind()也可以接受更多参数，作为被绑定函数的参数。
var add = function (x, y) {
return x * this.m + y * this.n;
}
var obj = {
m: 2,
n: 2
};
var newAdd = add.bind(obj, 5);
newAdd(5) // 20
// bind()方法除了绑定this对象，还将add()函数的第一个参数x绑定成5，然后返回一个新函数newAdd()，这个函数只要再接受一个参数y就能运行了。
因为每调用一次bind，就会生成一个新函数。所以下面这种写法不行。
element.addEventListener(‘click‘, o.m.bind(o));
element.removeEventListener(‘click‘, o.m.bind(o));
// Should be
var listener = o.m.bind(o);
element.addEventListener(‘click‘, listener);
element.removeEventListener(‘click‘, listener);
多次bind是无效的，只会保留第一次bind的结果。因为bind() 的实现相当于使用函数在内部包了一个 call / apply ，第二次 bind() 相当于再包住第一次 bind() ，故第二次及以后的 bind 是无法生效的。例子如下：
const people1 = {
age: 18
}
const people2 = {
age: 19
}
const people3 = {
age: 20
}
const girl = {
getAge: function() {
return this.age
}
}
const callFn = girl.getAge.bind(people1)
const callFn1 = girl.getAge.bind(people1).bind(people2)
const callFn2 = girl.getAge.bind(people1).bind(people2).bind(people3)
console.log(callFn(), callFn1(), callFn2())
// 18 18 18
实现
Function.prototype.imitateBind = function (context) {
// 获取绑定时的传参
let args = [...arguments].slice(1),
// 定义中转构造函数，用于通过原型连接绑定后的函数和调用bind的函数
F = function () {},
// 记录调用函数，生成闭包，用于返回函数被调用时执行
self = this,
// 定义返回(绑定)函数
bound = function () {
// 合并参数，绑定时和调用时分别传入的
let finalArgs = [...args, ...arguments]
// 改变作用域，注:aplly/call是立即执行函数，即绑定会直接调用
// 这里之所以要使用instanceof做判断，是要区分是不是new xxx()调用的bind方法
return self.call((this instanceof F ? this : context), ...finalArgs)
}
// 将调用函数的原型赋值到中转函数的原型上
F.prototype = self.prototype
// 通过原型的方式继承调用函数的原型
bound.prototype = new F()
return bound
}
箭头函数没有this。如果访问this，它会从外部获取。（在作用域中逐级寻找）
箭头函数的this无法通过bind，call，apply来直接修改（可以间接修改）。
改变作用域中this的指向可以改变箭头函数的this
eg. function closure(){()=>{//code }}，在此例中，我们通过改变封包环境closure.bind(another)()，来改变箭头函数this的指向。
例1：
let user = {
firstName: "Ilya",
sayHi() {
let arrow = () => alert(this.firstName);
arrow();
}
};
user.sayHi(); // Ilya
例2：
/**
* 非严格模式
*/
var name = ‘window‘
var person1 = {
name: ‘person1‘,
show1: function () {
console.log(this.name)
},
show2: () => console.log(this.name),
show3: function () {
return function () {
console.log(this.name)
}
},
show4: function () {
return () => console.log(this.name)
}
}
var person2 = { name: ‘person2‘ }
person1.show1() // person1，隐式绑定，this指向调用者 person1
person1.show1.call(person2) // person2，显式绑定，this指向 person2
person1.show2() // window，箭头函数绑定，this指向外层作用域，即全局作用域
person1.show2.call(person2) // window，箭头函数绑定，this指向外层作用域，即全局作用域
person1.show3()() // window，默认绑定，这是一个高阶函数，调用者是window
// 类似于`var func = person1.show3()` 执行`func()`
person1.show3().call(person2) // person2，显式绑定，this指向 person2
person1.show3.call(person2)() // window，默认绑定，调用者是window
person1.show4()() // person1，箭头函数绑定，this指向外层作用域，即person1函数作用域
person1.show4().call(person2) // person1，箭头函数绑定，
// this指向外层作用域，即person1函数作用域
person1.show4.call(person2)() // person2
最后一个person1.show4.call(person2)()有点复杂，我们来一层一层的剥开。
1、首先是var func1 = person1.show4.call(person2)，这是显式绑定，调用者是person2，show4函数指向的是person2。
2、然后是func1()，箭头函数绑定，this指向外层作用域，即person2函数作用域
首先要说明的是，箭头函数绑定中，this指向外层作用域，并不一定是第一层，也不一定是第二层。
因为没有自身的this，所以只能根据作用域链往上层查找，直到找到一个绑定了this的函数作用域，并指向调用该普通函数的对象。
绑定this：call()、apply()、bind()和它们的内部实现原理 + 箭头函数中的this
标签：not 如何 合并数组 invoke erro concat == 核心 func
原文地址：https://www.cnblogs.com/Nullc/p/12876893.html
