this绑定规则

[Moking1997]

this 绑定规则

• this绑定优先级:

  • 显式绑定 > 隐式绑定 > 默认绑定
  • new绑定 > 隐式绑定 > 默认绑定

• 一般绑定判别规则:

  1. 在函数调用时，this总是指向小数点左侧的那个对象
  2. 如果没有小数点，那么this指向全局作用域（比如 Window，严格模式为 undefined）
  3. 有几个可以改变this指向的函数——bind，call 和 apply
  4. 关键字 new将 this 绑定到那个新创建的对象上
  5. 箭头函数的this指向取决于外层作用域中的this

默认绑定

this默认指向全局对象window,严格模式下会绑定到undefined

function log() {
	console.log(this); //window
	console.log(this.value);
}; 

function strictLog() {
   "use strict";
	console.log(this); //undefined
	console.log(this.value);
}; 
var value = '全局 value';

log(); // window ,全局 value
strictLog() //undefined ,TypeError: Cannot read property 'value' of undefined

隐式绑定

函数调用时，如果前面存在调用它的对象，那么this就会隐式绑定到这个对象上,如果函数调用前存在多个对象，this指向最近的对象,即this总是指向小数点左侧的那个对象

function log() {
	console.log(this); //window
	console.log(this.value);
}; 
var value = '全局 value';

var o = {
	value:'对象 o 的value',
	log:log,
	obj:{
		value:'obj 的 value',
		log:log
	}
}

o.log()  // 对象 o, 对象 o 的value'
o.obj.log() // 对象 obj, obj 的value'

隐式丢失

在特定情况下会存在隐式绑定丢失的问题

1. 作为参数传递
2. 变量赋值

//  1. 作为参数传递时丢失
var value = '全局 value';
var o = {
	value:'对象 o 的value',
	log:function log() {
    	console.log(this.value);
	}
}

function doLog(log){
	log()
}
doLog(o.log) // 全局 value

// 2. 作为变量赋值时丢失
var o2 = o.log
o2() // 全局 value

显示绑定

利用 call，apply，bind 改变 this

var o1 = {
    value:'对象 o1 的value',
    log:function log() {
        console.log(this.value);
    }
}

var o2 = {
	value: '对象 o2 的 value'
}
// 以下输出皆为 对象 o2 的 value
o1.log.call(o2)
o1.log.apply(o2)
o1.log.bind(o2)()

new 绑定

new 将 this 绑定到那个新创建的对象上

var o1 = {
    value:'对象 o1 的value',
    foo:function foo(value) {
       this.value = value
    }
}

var o2 = new o1.foo('o2 的 value')
console.log(o2.value) //o2 的 value