JS中有两种模式，严格模式和非严格模式，我们看看这两种模式下this的情况
console.log(this);
// Window
'use strict'
console.log(this);
// Window
//两种模式下this的指向是相同的
函数内的this
- 普通模式
function fn () {
console.log(this); //window
console.log(this === window); //true
}
fn()
- 严格模式
'use strict'
function fn () {
console.log(this); //undefined
console.log(this === window); //false
}
fn()
不同模式下，函数内this的指向是不同的
call, apply, bind
- js中有方法可以改变this的指向，我们分别调用试试,call和apply的不同在于参数的不同，apply接受一个类数组对象，call用
,传入多个参数 - call,apply
'use strict'
function thisWithCall () {
console.log(this); //{name: 'harry'}
console.log('name is', this.name); //name is harry
}
thisWithCall.call({name : 'harry'})
function thisWithApply () {
console.log(this); //{name: 'potter'}
console.log('name is', this.name); //name is potter
}
thisWithApply.apply({name : 'potter'})
- bind创建一个新函数，此过程中改变this的指向，我们通过调用新函数使用改变的this
function thisWithBind () {
console.log(this); //henry
console.log('name is', this); //name is henry
}
let newBind = thisWithBind.bind('henry')
newBind()
箭头函数的this
- 箭头函数没有this,也不能设置this,他们使用外层作用域中的this指向
const obj = {
name : 'harry',
getArrowName: () => {
console.log(`name is ${this.name}`); //name is
console.log(this); //window
},
getNormalName: function () {
console.log(`name is ${this.name}`); //name is harry
console.log(this); //{name: 'harry', getArrowName: ƒ, getNormalName: ƒ}
}
}
obj.getArrowName()
obj.getNormalName()
箭头函数的this指向了全局作用域window,普通函数指向了obj的块级作用域
const count = {
count : 0,
addCount1 : function () {
setTimeout(() => {
console.log(this.count++); //0
console.log(this); //{count: 1, addCount1: ƒ, addCount2: ƒ}
})
},
addCount2: function () {
setTimeout(function () {
console.log(this.count++); //NaN
console.log(this); //window
})
}
}
count.addCount1()
count.addCount2()
setTimeout的回调中，箭头函数的this指向了count块级作用域，普通函数指向了全局作用域
对象方法的this
var obj = {
name : 'harry',
getName : function() {
return this
}
}
console.log(obj.getName()); //{name: 'harry', getName: ƒ}
//this指向调用自己的对象
构造函数内的this
'use strict'
function Person (name, age) {
this.name = name
this.age = age
this.getPerson = function () {
return `我是${this.name},我${this.age}岁了`
}
this.returnThis = function () {
return this
}
}
var p = new Person('harry', 18)
console.log(p); //Person {name: 'harry', age: 18, getPerson: ƒ, returnThis: ƒ}
console.log(p.getPerson()); //我是harry,我18岁了
console.log(p.returnThis()); //Person {name: 'harry', age: 18, getPerson: ƒ, returnThis: ƒ}
构造函数内的this，指向其创建的实例
事件中的this
<button id="btn">点击</button>
//普通函数
var btn = document.querySelector('#btn')
btn.addEventListener('click', function () {
console.log(this); //<button id="btn">点击</button>
})
//箭头函数
var btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
console.log(this); //window
})
按钮点击事件的this指向了按钮本身(普通函数)，箭头函数中指向了全局window
