1.看前热身
看一段代码
<script type="text/javascript">
var name = "javascript";
var obj = {
name:"js",
foo:function () {
console.log(this.name);
}
};
//挪用foo函数
obj.foo(); //js
</script>
上面的这段代码中 obj是JavaScript中的对象范例,对象就是属性和要领的鸠合。
假如实行obj.foo()函数的话,在控制台输出js。
实在this的定义就是,他是js对象中的一个特别指针,他的指向依据环境的差别而发作转变。
2.this的指向
this的指向:谁挪用或许哪一个对象挪用this地点的函数,this就指向谁。
组织函数的this和一般函数的this指向
组织函数的this
//组织函数和一般函数的this指向
var name = '淘宝';
//组织函数
function Foo() {
this.name = '腾讯';
this.aa = function () {
console.log(this.name);
} ;
}
// 实例化对象
var obj = new Foo();
obj.aa();//腾讯
一般函数的this
var name = '淘宝';
function foo() {
var name = '腾讯';
console.log(this.name);
}
foo(); //淘宝
在一般函数中,this指的是window对象,所以在这里输出的依然是‘淘宝’;
更深的一个函数的this
var name = '淘宝';
function Foo() {
this.name = '腾讯';
this.foo = function () {
var name = '百度';
return function () {
console.log(this.name);
}
}
}
var obj = new Foo();
obj.foo()();//淘宝
这个函数this的指向依然是window
3.定时器中的this指向
// 定时器中的this
var name = '淘宝';
function foo() {
var name = '腾讯';
console.log(this.name);
}
// 定时器
setTimeout(foo,1000) //淘宝
由此小案例能够看出 定时器中的this指的是window对象。
再来看一个小的示例
var name = '淘宝';
var obj = {
name :'腾讯',
fn:function () {
console.log(this.name);
},
foo:function () {
setTimeout(this.fn,1000);
}
};
obj.foo();//淘宝
为何输出的依然是淘宝呢?
obj.foo()挪用的是obj对象中的foo()要领,foo()要领内里有一个定时器,而定时器的一个参数是this.fn,这里的this指的就是obj的对象,然后fn()要领内里有挪用了this.name,然则定时器中的this指的是window对象,所以终究this.name挪用的是window对象中name。
在上面的示例中,把输出的‘淘宝’改成‘腾讯’
var name = '淘宝';
var obj = {
name :'腾讯',
fn:function () {
console.log(this.name);
},
foo:function () {
// setTimeout(this.fn.call(obj),1000);
setTimeout(this.fn.bind(obj),1000);
}
};
obj.foo();//腾讯
在this挪用的时刻增加bind或许call强迫转变this的指向,在这里,指向了obj,所以输出的是obj.name,为‘腾讯’。
4.箭头函数的this
示例
var author = 'lzz';
var book = {
author:'ql',
init:function () {
setTimeout(ev => {
console.log(this.author);
},1000);
}
};
book.init();
箭头函数的特性就是定义在哪,this的指向在那。就是箭头函数定义在一个对象内里,那末箭头函数内里的this就指向该对象。