一、常见的this指向问题
(1)、 在普通函数中,this指向window
function fn() {
console.log(this);//window
}
(2) 、在构造函数中,this指向实例化后的对象
function A(name, age) {
this.name = name;
this.age = age;
console.log(this);// this指向实例化后的对象,为A {name: '黄四郎', age: 18}
}
let a = new A('黄四郎', 18);
(3)、在方法声明中,this指向该方法所属的对象
let obj= {
name: '张麻子',
say() {
function fn() {
console.log(this, 1);//window 1
}
fn();
let a = () => {
console.log(this, 2);//{name: '张麻子', say: ƒ} 2
}
a();
}}
obj.say();
(4)、 在定时器中, this指向window
setInterval(function(){
console.log(this,1);//this指向window
})
(5)、在事件中,this 指向事件源
<body>
<p>南风知我意,吹梦到西洲</p>
<script>
let p = document.querySelector('p');
p1.onclick=function(){
console.log(this);//this指向p标签
}
</script>
</body>
(6)、在JS中,单独使用this,this指向全局对象window
console.log(this);//window
(7)、在箭头函数中,this指向window
<body>
<p>路漫漫其修远兮,吾将上下而求索</p>
<script>
let p = document.querySelector('p');
p.onclick = () => {
console.log(this);//window
}
</script>
</body>
箭头函数中,this指向固定化(指向其宿主对象),并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数没有自己的this,导致内部的this为外层代码块的this。正因如此,所以箭头函数也不能做构造函数。
二、改变this指向的方法
(1)call()。作用是调用函数,并修改函数中this的指向;语法是: 函数名. call(对象,实参1,实参2);
function A(name,age){
this.name=name
this.age=age
this.say=function(){
console.log(this.name);
}
}
A.prototype.like='女妖'
function B(name,age,des,ibfo){
this.des=des
this.ibfo=ibfo
A.call(this,name,age)
}
let b=new B('聂小倩',24,'漂漂亮亮','白富美')
console.log(b);//B {des: '漂漂亮亮', ibfo: '白富美', name: '王小丫', age: 24, say: ƒ}
console.log(b.like);//undefined,call不能继承原型对象上的属性和方法
(2)、apply()。修改函数中this的指向,立即执行函数;语法: 函数名. apply(对象,数组);
function g(a,b){
console.log(a*b);//64
}
let o={}
g.apply(o,[32,2])
(3)、bind(),在低版本IE中有兼容问题;bind可以返回一个新的函数,它会创建一个与原函数主体相同的新函数,新函数中的this指向传入的对象。语法: 函数名. bind(对象,实参1,实参2);
<body>
<div>诸葛亮</div>
<script>
let div=document.querySelectorAll('div')
div[0].onclick=function(){
console.log(this);//div标签
setTimeout(function(){
console.log(this);//结果为div标签;bind改变了this的指向,此处this与事件函数中this指向一致
}.bind(this,2000) )
}
</script>
</body>