this代表当前this直属函数的所处的对象
此时的this表示people let people = { name: 'dong', sayName: function() { console.log(this.name) } } // dong
const app = { init() { this.$btn = document.querySelector('button') this.bind() }, bind() { this.$btn.onclick = function() { console.log(this) this.getData() //这样写对吗，如果不对该如何修改？ } }, getData() { console.log('get data...') } } app.init()
init方法里的this指的是app
bind方法里，根据定义，第8，9行的this指的不是app，而是 $btn元素对象,$btn元素对象没有getData方法所以会报错
修改方法 方法一：先把this对象复制到self
bind() { let self = this this.$btn.onclick = function() { console.log(this) // 这个this 还是 btn 对象 self.getData() //self 代表外面的this，也就是app } },
方法二：使用箭头函数 （） 箭头函数没有this,所以此时this的直属函数是bind
bind() { this.$btn.onclick = () => { console.log(this) // 在确定this直属的函数时，不考虑箭头函数 this.getData() // 所以当前this直属的函数是bind } },
案例
let name = '中国' let people = { name: '郑州', sayName() { console.log(this.name) } } let sayAgain = people.sayName function sayName(){ console.log(this.name) } people.sayName() sayAgain() sayName()
执行people.sayName()会输出郑州，因为他的this的直属函数是sayName,所属对象是people
执行sayAgain(),就会调用执行 people.sayName()，调用了sayAgain才执行函数，所以this的直属函数是sayAgain，sayAgain所属的对象在非严格模式下我们普遍认为是window ,所以this指向window, 因为let不会在全局声明时（在最顶部的范围）创建window 对象的属性。所以name变量并不是window的属性，所以输出的是空的,如果使用var定义name变量那么就会打印出“中国”
执行sayName()时，此时this的直属函数是sayName(),它的所属对象就是window,所以this就是window
数组的this
let arr = [] for(let i=0; i<3; i++){ arr[i] = function() { console.log(this) } } arr[0]() let fn = arr[0] fn()
数组也是一种对象，相当于{ 0：值，1：值}
for循环执行完后数组里面相当于存了三个函数 [ƒ, ƒ, ƒ] 执行 arr[0]() 时，this的直属函数就是arr[0]，所属对象就是数组，所以会打印出数组
执行 fn() , 此时this的所属对象就是fn()，而fn的所属对象是window,所以打印处window对象
定时器的this
let people = { name: 'dong', sayName() { setTimeout(function(){ console.log(this.name) }, 0) } } people.sayName()
此时this的直属函数是function，而它的所属对象是window,所以this指向window,window并没有name属性，所以打印出undefined
箭头函数的this
箭头函数的this会被我们忽略掉，找它上一级的函数
箭头函数没有this或者理解成箭头函数的this是箭头函数直属的函数
let people = { name: 'dong', sayName() { setTimeout(() => { console.log(this.name) }, 0) } } people.sayName()
因为this直属的函数是箭头函数，箭头函数的this是 箭头函数直属的函数也就是sayName(),而sayName()属于people,所以this代表people,会打印出 dong
构造函数的this
function Wife(name) { this.name = name } Wife.prototype.showSkill = function() { console.log('我是' + this.name + ', 我的技能是唱歌、跳舞、打游戏') }
一个直男幻想着：如果我以后有个女神老婆，她的技能最好是唱歌、跳舞、打游戏。上面代码里的this（出现在构造函数内和原型的方法内）就代表幻想的那个未来的那个“她”。
那么我现在开始创建，创建的是谁，这个this就是谁 我创建这个老婆是刘亦菲，那么这个this就是刘亦菲
let wife = new Wife('刘亦菲') wife.showSkill()
我创建这个老婆是佟丽娅，那么这个this就是佟丽娅
let wife = new Wife('佟丽娅') wife.showSkill()
只有new之后，真正的 wife 才创建，之前幻想时对 她（this） 的操作才真正开始实施。对this操作就是对wife的操作。
更改this指向的对象
this默认是当前this直属的函数所处的对象，可以使用 call/apply/bind,方法传入第一个参数就是指向的对象
let obj = { fn(a, b) { console.log(this) } } obj.fn(1, 2) //打印出obj对象 //等价于 obj.fn.call(obj, 1, 2) // 所以 this 是 obj obj.fn.apply(obj, [1, 2]) obj.fn.bind(obj)(1, 2)
call/apply/bind里面第一个参数传什么，函数里面的this就是什么。
let obj = {name: 'dong'} function sayName(){ console.log(this.name) } let fn = sayName.bind(obj) fn() // 输出： 'dong'
不使用bind时，this所属的对象是window，使用bind并将obj对象传入，则this就是obj
复杂案例
let app = { container: document.querySelector('body'), init: function(){ //点击的时候会执行 sayHello，sayHello 里面的 this 代表 body 对象 this.container.addEventListener('click', this.sayHello) //点击的时候会执行 sayHello，sayHello 里面的 this 代表 app 对象 this.container.addEventListener('click', this.sayHello.bind(this)) }, sayHello: function(){ console.log(this) } } app.init()
init函数里的两个this指的是app
点击调用sayHello函数，此时sayHello里this直属的函数是click,click的所属对象就是DOM对象container也就是body
使用bind传参，传入的this就是当前对象app,所以此时再调用sayHello函数它里面的this就是app
总结
当看到this时，想知道它是什么，就需要看
- this的直属函数是谁，忽略箭头函数
- 直属函数是哪个对象上的方法
- 有没有使用过call、apply、bind来修改this
