04_this

this

• this 和执行上下文绑定

全局执行上下文中的this

指向 wihdow 对象

函数执行上下文中的this

默认情况调用函数，其执行上下文的this也是指向window对象

设置this指向

1. 函数 call 方法

let bar = {
 	myName : " 极客邦 ",
 	test1 : 1
}
function foo(){
 	this.myName = " 极客时间 "
}
foo.call(bar)
console.log(bar) // {myName: ' 极客时间 ', test1: 1}
console.log(myName) // 报错，变量未定义

说明：foo函数的this指向bar对象

2. 对象调用方法

var myObj = {
 	name : " 极客时间 ", 
 	showThis: function(){
 		console.log(this)
 	}
}
myObj.showThis() // {name: ' 极客时间 ', showThis: ƒ}

说明：使用对象来调用其内部的一个方法，该方法的this指向对象本身

3. 构造函数

function CreateObj(){
 	this.name = " 极客时间 "
    console.log(this) // CreateObj {name: ' 极客时间 '}
}
var myObj = new CreateObj()

说明：构造函数中的this指向新对象

缺陷和解决方案

1. 嵌套函数中的 this 不会从外层函数中继承

var myObj = {
 	name : " 极客时间 ", 
 	showThis: function(){
 		console.log(this) // {name: ' 极客时间 ', showThis: ƒ}
 		function bar(){console.log(this)} // window对象
 		bar()
 	}
}
myObj.showThis()

• 解决方案
  1. 使用一个self变量保存this
  2. 使用箭头函数

// self
var myObj = {
	name : " 极客时间 ", 
 	showThis: function(){
 		console.log(this) // {name: ' 极客时间 ', showThis: ƒ}
 		var self = this
 		function bar(){
 			self.name = " 极客邦 "
		}
     	bar()
 	}
}
myObj.showThis()
console.log(myObj.name) // 极客邦
console.log(window.name)// (空)

// 箭头函数
var myObj = {
 	name : " 极客时间 ", 
 	showThis: function(){
 		console.log(this) // {name: ' 极客时间 ', showThis: ƒ}
 		var bar = ()=>{
 			this.name = " 极客邦 "
 			console.log(this) // {name: ' 极客邦 ', showThis: ƒ}
 		}
 		bar()
	}
}
myObj.showThis()
console.log(myObj.name) // 极客邦
console.log(window.name) // (空)

2. 普通函数中的 this 默认指向全局对象 window

• 解决方案
  1. 指向对象，最好的方式：用call方法
  2. 严格模式，this 值为 undefined

学习资料

李兵：《11丨this：从JavaScript执行上下文的视角讲清楚this》