进来发现很多初学前端的程序猿对this这个关键词的用法不是很了解,接下来就分几种方式来解析一下这个this。
一、全局调用
function yourName() {
this.name = "寒冷东";
console.log(this.name);
}
yourName(); //寒冷东
以上代码中,yourName()是全局性的方法,属于全局性调用,因此this就代表全局对象window。
二、对象调用
function yourName() {
console.log(this.name);
}
var obj = {};
obj.name = "寒冷东";
obj.show = yourName;
obj.show(); //寒冷东
函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
三、构造函数调用
构造函数,就是通过这个函数,可以生成一个新对象。这时,this就指这个新对象。
function yourName() {
this.name = "寒冷东";
}
var obj=new yourName();
obj.name // 寒冷东
上述代码中,我们通过new关键字创建一个对象的实例,new关键字可以改变this的指向,将这个this指向对象obj。
可以再生命一个name来证明this指向的不是全局。
var name=‘程序猿’
function yourName() {
this.name = "寒冷东";
}
var obj=new yourName();
obj.name // 寒冷东
在构造函数里面我们可以对name重新赋值,但并没有改变全局的name。
四、apply/call调用时
apply()和call()。两者用途都是在特定的作用域中调用函数,等于重新设置了函数体内this对象的值。
var name = "程序猿";
function FunOne() {
this.name = "寒冷东";
}
function FunTwo() {
console.log(this.name );
}
FunTwo(); //程序猿 因为是在全局中调用的FunTwo(),this.name 指向全局的name
FunTwo.call(window); //程序猿,this指向window对象,因此this.name 指向全局的name
FunTwo.call(new FunOne()); //寒冷东, this指向参数new FunOne(),即FunOne对象
FunTwo.apply(window); //程序猿
FunTwo.apply(new FunOne()); //寒冷东
上面的代码中,apply() 和 call() 的 this指向都是一样的。只不过调用参数的方式不一样,call() 是一个一个调用参数,apply() 是调用一个数组。
以上是我自己的一些见解,不足之处请各位大佬指出。