zoukankan      html  css  js  c++  java
  • 理解JavaScript的this对象

    1.概述

    this对象是在运行时基于函数的执行环境绑定的,this总是返回一个对象,简单说,就是返回属性或方法“当前”所在的对象。在全局函数中,this等于window,而当函数作为某个对象的方法调用时,this等于那个对象。不过匿名函数的执行环境具有全局性,因此其this对象通常指向window(如果通过call()或者apply()改变函数执行环境的情况下,this会指向其他对象。)。

    2.为什么使用this?

    虽然知道了this是怎么回事了,但是为什么要使用this,或者说this它带来了那些好处了。

    因为在实例化对象时,总是不能确定开发者会使用什么样的变量名。使用 this,即可在任何多个地方重用同一个函数。请思考下面的例子:

    function showColor() {
      alert(this.color);
    };
    
    var oCar1 = new Object;
    oCar1.color = "red";
    oCar1.showColor = showColor;
    
    var oCar2 = new Object;
    oCar2.color = "blue";
    oCar2.showColor = showColor;
    
    oCar1.showColor();		//输出 "red"
    oCar2.showColor();		//输出 "blue"
    

    3.下面来看使用this的一些情况

    示例一

    var name = "The Window";
    var object = {
        name : "My Object",
            
        getNameFunc : function(){
            return function(){
                return this.name;
            };
        }
    };
            
    alert(object.getNameFunc()());  //"The Window"
    

    上面代码先创建了一个全局变量name,又创建了一个包含name属性的对象。这个对象还包含一个方法-getNameFunc(),它返回一个匿名函数,而这个匿名函数又返回this.name。由于getNameFunc()返回一个函数因此调用object.getNameFunc()()就会立即调用它的返回的函数,最后返回了全局name变量的值The Window。为什么没有返回My Object?

    解释:每个函数在调用的时候,其活动对象都回自动取得两个变量:this和arguments。而调用object.getNameFunc()()返回的匿名函数是在全局环境中执行的,所以它的this指向就是window了。

    那么如果要调用外部的this,有什么办法呢?通过把外部作用域中的this对象保存在一个闭包能够访问到的变量里,就可以让闭包访问该对象了,如下所示。

    示例二

    var name = "The Window";
             
    var object = {
        name : "My Object",
                 
        getNameFunc : function(){
            var that = this;
            return function(){
                return that.name;
            };
        }
    };
                
    alert(object.getNameFunc()());  //"MyObject"
    

    这个例子与上面的例子区别是,在定义匿名函数之前,我们把this对象赋值给了一个名叫that的变量,从而使得this的值得到了固定。而定义了闭包,通过作用域链就能访问到that了。

    示例三

    function sayColor(color){
        this.color=color;
        alert(this.color);
    }
    function ClassB(sColor, sName) {
        sayColor.call(this, sColor);//this是指classB的实例对象,将sayColor函数作为classB的实例对象方法调用,并传入了sColor参数。
        
       // sayColor.apply(this, arguments);
        this.name = sName;
        this.sayName = function () {
            alert(this.name);
        };
    }
    
  • 相关阅读:
    Nginx负载均衡
    MySQL主从复制
    笔记
    tomcat工作原理
    Nginx工作原理
    Loj#6183. 看无可看
    [BZOJ 2759] 一个动态树好题
    5255 -- 【FJOI2016】神秘数
    [NOI2015]寿司晚宴
    [CQOI2017]老C的键盘
  • 原文地址:https://www.cnblogs.com/YeChing/p/6285353.html
Copyright © 2011-2022 走看看