简述JS中this的指向

背景介绍

1.this是JavaScript语言中定义的众多关键字之一。 this 是一个特殊的标识符关键字 —— 在每个 function 中自 动根据作用域(scope) 确定, 指向的是此次调用的 “所有者,owner”。它的特殊在于它自动定义于每一个函数域内。

2.知识剖析

概念的区分:

变量:全局中的变量可以称之为window这个对象的属性;

函数(function):全局中的函数可以称之为window这个对象的方法;

属性:其实就是你声明的对象中的变量;

方法:其实就是你声明的对象中的函数;

对象中的属性这个概念对应着变量,对象中的方法这个概念对应着函数。

                
    huahua = 'wang';
    function cuihua() {
    	alert('我叫翠花');
    }//全局变量,与函数
    shuangdan = {
        dan:'两个',
    	myname:function () {alert('我叫李双蛋')}
    };//对象的属性与方法;
                   
                


作用域和上下文:

函数的每次调用都有与之紧密相关的作用域和上下文。

从根本上来说,作用域是基于函数的,而上下文是基于对象的。

换句话说,作用域涉及到所被调用函数中的变量访问,并且不同的调用场景是不一样的。

上下文始终是this关键字的值, 它是拥有(控制)当前所执行代码的对象的引用。

2. this指向的是谁?

在所有 function 中, this 的值都是根据

上下文(context, 函数在调用时刻所处

的环境)来决定的。this 的作用域(scope) 与函数

定义的位置没有关系, 而是取决于函数在哪里被调用

                    
    brand = 'Nissan';
    myCar = {brand:'honda'};

    getBrand = function () {
        console.log(this.brand);
    };

    myCar.getBrand = getBrand;

    myCar.getBrand();//honda

    getBrand();//nissan
     // 函数是哪个对象的方法, 在函数中, this 就绑定到这个对象。
                    
                

解析:

现在myCar.getBrand();和getBrand()指向的都是同一个函数,

但是里面的this是不同的,因为它取决于 getBrand() 在哪个上下文中调用。

因此第一个函数调用对应的是 mycar对象, 第二个函数调用对应的是window.

现在就知道了, 函数是哪个对象的方法, 在函数中, this 就绑定到这个对象。

                    
                在函数中, this 取决于函数是怎么调用的。分三种情况:

                3.1在简单函数调用(Simple Function Call)中使用this
                第一种情形是直接调用一个独立的函数。

                function simpleCall(){
                console.log(this);}

                simpleCall();// output: the Window object

                在这种情况下,this值没有被 call 设置。
                this 又必须是一个对象, 所以他的值默认为全局对象。
                    
                
                    
    3.2. 在对象的方法(Object’s Method)中使用
    this将函数保存为对象的属性, 这样就转化为一个方法, 可以通过对象调用这个方法。
    当函数被当成对象的方法来调用时, 里面的 this 值就被设置为调用方法的对象。

    var message = {
       content: "I'm a JavaScript!",
       showContent: function() {
           console.log(this.content);
       }
    };
    message.showContent();// output: I'm a JavaScript!

    // 还是那句话函数是哪个对象的方法, 在函数中, this 就绑定到这个对象。
                    
                
                    
    3.3. 我们可以通过 new 操作符来调用函数。在这种情况下,这个函数
	就变成了构造函数(也就是一个对象工厂).
    当一个函数作为构造器使用时(通过 new 关键字), 它的 this 值绑定到新
	创建的那个对象。如果没使用 new 关键字, 那么他就只是一
	个普通的函数, this 将指向 window 对象。
    function Message(content){
        this.cont = content;
        this.showCont = function(){
            console.log(this.cont);
        };
    }
    var message = new Message("I'm JavaScript Ninja!");
    message.showCont();

    在上面的示例中, 有一个名为 Message() 的构造函数。通过
    使用 new 操作符创建了一个全新的对象,名为 message。同时还通过传给
    构造函数一个字符串, 作为新对象的content属性。
                    
                


2.参考资料

掌握JS中的“this” (一)        作者:‘铁锚’

JavaScript的作用域和上下文        作者:‘荆棘中的百合花’

this - 是个啥      作者:表严肃


猜你喜欢

转载自blog.csdn.net/hughie_1/article/details/80558540
今日推荐