介绍
this 是一个对象，指向函数的执行上下文或执行环境。
正常情况下是动态绑定。
动态绑定的意思是只有程序运行时才会确定最终指向。
但箭头函数和强制绑定例外。
默认绑定
function fn(){
console.log(this)
}
// window
隐式绑定
var obj = {
a: 1,
fn: function () {
console.log(this)
}
}
obj.fn() // obj
var fn1 = obj.fn
fn1() // window
因为this是动态绑定的，而fn1 和 obj.fn 均是引用地址，实际情况还是得程序运行时去确定this的指向。
显示绑定
我们可以通过call,apply,bind方法来强制改变this指向。
var obj = {
a: 1,
fn: function(){
console.log(this)
},
fn2: () => {
console.log(this)
},
fn3: {
fn: () => {
console.log(this)
}
},
fn4: function () {
console.log(1, this)
return () => {
console.log(2, this)
}
}
}
var person = {
name: 'zs'
}
obj.fn() // obj
obj.fn2() // window
obj.fn.call(person) // person 1
obj.fn2.call(person) // window 2
obj.fn3.fn() // window 3
obj.fn4()() // 1:obj 2:obj 4
1: 使用call,apply,bind 强制改变this指向；
2: 箭头函数内的this无法被改变；
4: 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this(箭头函数内的this指向定义箭头函数时的this)
3: js只有函数作用域和全局作用域，没有块级作用域,因此它的上一级是全局作用域。
箭头函数
箭头函数的this指向在上一个例子中已经说明了，这里在概括一下：
1.箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this;
2.箭头函数里的this指向无法被call,apply,bind改变；
Oh my god
var fn1 = function () {
console.log(1, this)
}
var fn2 = () => {
console.log(2, this)
}
var arr = [fn1, fn2]
for(var i=0;i<arr.length;i++){
arr[i]() // ???
}
output: 1 arr // WTF ???
2 window
从这个例子中可以看到如果通过下标的方式去访问数组中的对象，会将this绑定到数组这个对象，由此带来的安全问题难以想象（发布订阅模式中）
For example:
function subpub() {
var subscribtions = []
function subscribe(subscriber){
subscribtions.push(subscriber)
}
function publish(){
for(var i=0;i<subscribtions.length;i++){
subscribtions[i]()
}
}
return {
subscribe,
publish
}
}
var subpubInstance = subpub()
subpubInstance.subscribe(function(){
console.log(1, this)
this.length = 0 // 搞破坏
})
subpubInstance.subscribe(function(){
console.log('dooooo')
})
subpubInstance.publish() // oh shit
How to fix it?
// 不要通过下标的形式去获取
function publish(){
// for(var i=0;i<subscribtions.length;i++){
// subscribtions[i]()
// }
subscribtions.forEach(fn => {
fn()
})
}
网友评论