Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JavaScript 中 this 的详解 #6

Open
lin-xin opened this issue Mar 20, 2017 · 1 comment
Open

JavaScript 中 this 的详解 #6

lin-xin opened this issue Mar 20, 2017 · 1 comment

Comments

@lin-xin
Copy link
Owner

lin-xin commented Mar 20, 2017

this 的指向

this 是 js 中定义的关键字,它自动定义于每一个函数域内,但是它的指向却让人很迷惑。在实际应用中,this 的指向大致可以分为以下四种情况。

1.作为普通函数调用

当函数作为一个普通函数被调用,this 指向全局对象。在浏览器里,全局对象就是 window。

window.name = 'linxin';
function getName(){
    console.log(this.name);
}
getName();                   // linxin

可以看出,此时 this 指向了全局对象 window。
在ECMAScript5的严格模式下,这种情况 this 已经被规定不会指向全局对象了,而是 undefined。

'use strict';
function fun(){
    console.log(this);
}
fun();                      // undefined

2.作为对象的方法调用

当函数作为一个对象里的方法被调用,this 指向该对象

var obj = {
    name : 'linxin',
    getName : function(){
        console.log(this.name);
    }
}

obj.getName();              // linxin

如果把对象的方法赋值给一个变量,再调用这个变量:

var obj = {
    fun1 : function(){
        console.log(this);
    }
}
var fun2 = obj.fun1;
fun2();                     // window

此时调用 fun2 方法 输出了 window 对象,说明此时 this 指向了全局对象。给 fun2 赋值,其实是相当于:

var fun2 = function(){
    console.log(this);
}

可以看出,此时的 this 已经跟 obj 没有任何关系了。这时 fun2 是作为普通函数调用。

3.作为构造函数调用

js中没有类,但是可以从构造器中创建对象,并提供了 new 运算符来进行调用该构造器。构造器的外表跟普通函数一样,大部分的函数都可以当做构造器使用。当构造函数被调用时,this 指向了该构造函数实例化出来的对象。

var Person = function(){
    this.name = 'linxin';
}
var obj = new Person();
console.log(obj.name);      // linxin

如果构造函数显式的返回一个对象,那么 this 则会指向该对象。

var Person = function(){
    this.name = 'linxin';
    return {
        name : 'linshuai'
    }
}
var obj = new Person();
console.log(obj.name);      // linshuai

如果该函数不用 new 调用,当作普通函数执行,那么 this 依然指向全局对象。

4.call() 或 apply() 调用

通过调用函数的 call() 或 apply() 方法可动态的改变 this 的指向。

var obj1 = {
    name : 'linxin',
    getName : function(){
        console.log(this.name);
    }
}
var obj2 = {
    name : 'linshuai'
}

obj1.getName();             // linxin
obj1.getName.call(obj2);    // linshuai
obj1.getName.apply(obj2);   // linshuai

这两个方法在js中都是非常常用的方法,可以阅读下一篇:javascript 中 apply 、call 的详解

@JYFlw
Copy link

JYFlw commented Apr 29, 2021

good idea

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants