使用方法
Call
function say(name1, name2) {
console.log(this, name1, name2)
}
let a = { age: 1 }
say.call(a, '张', '三')
// { age: 1 } '张' '三'
Apply
function say(name1, name2) {
console.log(this, name1, name2)
}
let a = { age: 1 }
say.apply(a,[ '张', '三'])
// { age: 1 } '张' '三'
Bind
function say(name1, name2) {
console.log(this, name1, name2)
}
let a = { age: 1 }
let b = say.bind(a,[ '张', '三'])
console.log(b) // 指向a的say函数
b()
// { age: 1 } '张' '三'
thisArg
- 当不传、为null、undefine时，this指向window
- 传递的是函数时，this指向该函数的引用
- 传递的是原始值（1, '1', false），this指向原始值的自动包装对象
- 传递的是对象，则指向该对象
三者之间的区别
- 改变this后，执行函数
- call：参数直接在thisArg后面书写
- apply：第二个参数为一个数组，该数组的元素会被当成参数传递到函数中去
- 改变this后，返回了绑定了this的函数
- bind
应用
求最大值
let a = [1, 4, -3, 5]
Math.max.apply(null, a)
//解构的方式 Math.max(...a)
伪数组转成数组
let a = {
0: 'a',
1: 'b',
2: 'c',
length: 3
}
Array.prototype.slice(a) // 注：slice的参数为空时，默认从0开始切割
// ['a', 'b', 'c']
继承
请看原型的章节
如何实现
Call
- 如果没有传入thisArg，则默认指向window
- 改变this，并执行该函数，同时传入参数
Function.prototype.myCall = function(context) {
context = context || window
context.fn = this // this指向的是原函数 a.call()，指向的就是a函数
// 这里的arguments包括了context，所以需要将其剔除
let [, fnParmas] = [...arguments]
let res = context.fn(fnParmas)
delete context.fn // 这里会有点问题，当传进来的context有fn字段时，会被覆盖，在这里删除。造成了字段的丢失
return res
}
优化~~~
Function.prototype.myCall = function(context) {
context = context || window
const s = Symbol() // Symbol在对象的字段中是唯一存在的
context[s] = this
let [, fnParmas] = [...arguments]
let res = context[s](fnParmas)
return res
}
Apply
Function.prototype.myApply = function(content) {
const s = Symbol()
context = content || window
context[s] = this
const [, arg] = [...arguments]
const res = context[s](...arg)
return res
}
Bind
bind()方法会返回一个函数，当这个函数被调用时，bind()的第一个参数作为他运行时的this，之后的一序列的参数在传递实参之前传入作为他的参数。
- 返回一个函数
- bind()的参数 + 返回的函数的参数一起传入该函数。（thisArg不作为参数传入）
Function.prototype.myBind = function (context) {
const _this = this
const arg1 = Array.prototype.slice(arguments, 1)
var fBound = function () {
const arg2 = Array.prototype.slice(arguments)
// 因为new的时候，this会指向实例，实例 instanceof fBound就为true，然后将绑定的函数的this指向该实例
return _this.apply(this instanceof fBound ? this : context, arg1.concat(arg2))
}
// 修改返回函数的的prototype为绑定函数的prototype，实例就可以继承绑定函数的原型中的值
fBound.prototype = this.prototype
return fBound
}
bind参考文章：https://github.com/mqyqingfeng/Blog/issues/12
题目
题目一
执行以下代码会出现什么结果
var altwrite = document.write;
altwrite("hello");
会报错，因为window上没有altwrite方法。主要考点就是this指向的问题，altwrite()函数改变this的指向global或window对象，导致执行时提示非法调用异常。使用call改变this指向即可。
