zoukankan      html  css  js  c++  java
  • JavaScript中的this所引用的对象和如何改变这个引用

    this是函数内部的一个特殊对象,它引用的是函数执行环境对象。也就是运行是基于函数的执行环境绑定。

    1.在网页全局作用域中调用函数时,this引用window

    var color='black';
    function saycolor(){
    console.log(this.color);
    }
    saycolor();//'black'

      第5行函数saycolor在全局作用域调用时this引用的是全局对象window,所以this.color的值就是window.color的值。

    2.作为某个对象的方法被调用时,this等于该对象。

    var o={
        color:'white',
        saycolor:function(){
        console.log(this.color);
    }};
    o.saycolor();//'white'

      我们定义了一个新对象o,并为o添加了一个属性color和一个方法saycolor,第8行调用o对象的saycolor函数时,this引用的是对象o,所以this.color的值变成了o.color的值。

    3.匿名函数的执行函数具有全局性,因此它的this通常指向window

    var name='The Window';
    
    var object={
        name:'My Object',
    
        getName:function(){
            return function(){
                return this.name;
            };
        }   
    };
    console.log(object.getName()());//'The Window'
    

      object.getName()返回的是一个函数,因此object.getName()()会立即调用它返回的函数。内部函数在搜索this变量时,只会搜索到其活动对象为止,所以不可能直接访问外部函数的this变量,也就是this不可能引用object对象。

    4.把外部函数的this对象保存在闭包可访问到的变量中,在闭包中就可访问该对象了

    var name='The Window';
    
    var object={
        name:'My Object',
    
        getName:function(){
            var that=this;
            return function(){
                return that.name;
            };
        }   
    };
    
    console.log(object.getName());//'My Object'
    

      在定义匿名函数之前,我们把this赋值给一个that变量,在定义闭包之后,闭包也可以访问这个变量,即使在函数返回之后,这个变量也引用着object对象,所以调用object.getnName()()返回'My Object'。

    this是一个强大而又复杂的对象,我们一定要理解好它具体指代什么对象,接下来我们介绍两个方法call()和apply()。这两个方法的用途是在特定的作用域中调用函数,等于设置函数体内this对象的值。它们最强大的是能够扩大函数赖以运行的作用域。

    call()与apply()只改变this对象的时候,只需要传入要引用的对象,此时它们作用相同,可以互用。它们扩充作用域的最大好处是方法与对象不需要任何耦合关系。

    var color='black';
    var o={color:'white'};
    
    function saycolor(){
        console.log(this.color);
    }
    saycolor(); //'black'
    
    saycolor.call(this);//'black'
    saycolor.call(window);//'black'
    saycolor.call(o);//'white'
    saycolor.apply(this);//'black'

    saycolor.apply(o);//'white'

      它们的区别是apply纯如的第二个参数是数组,call传入的第二组参数需要一个个列举出来。代码如下:

    function sum(num1,num2){
        return num1+num2;
    }
    
    function applySum(num1,num2){
        return sum.apply(this,arguments); /*参数第一个是在其中运行函数的作用域,第二个参数是数组 等价于 return sum.apply(this,[num1,num2]);*/
    }
    
    function callSum(num1,num2){
        return sum.call(this,num1,num2);/*参数第一个是在其中运行函数的作用域,后面一个个传参数*/
    }
    
    console.log(applySum(10,10));//20
    console.log(callSum(10,10));//20
    

      另外还有一个方法bind(),这个方法会创建一个函数实例,它的this值会被绑定到传给传给bind()函数的值

    var color='black';
    var o={color:'white'};
    
    function saycolor(){
        console.log(this.color);
    }
    var objsaycolor=saycolor.bind(o);
    objsaycolor();//'white'
    

      saycolor调用bind()并传入对象o,创建了objsaycolor()函数,该函数的this值等于o,因此即使全局作用域中调用这个函数,也得到的是'white'。使用这个方法是根据是否需要object对象响应来决定的。

  • 相关阅读:
    iOS开发编程英语(单词带音标)
    iOS多线程管理-Thread,NSOperation,GCD的简单用法
    AFN下载文件的随笔
    HTML5/CSS3动画应用
    Android 常用基础
    Java JDK8 安装及环境变量配置
    Jquery扩展- 倒计时
    页面中引入带中文的JS文件乱码问题
    曾经记录——asp.net中的点滴
    Linux Mono OpenShift Cloud9 rhc
  • 原文地址:https://www.cnblogs.com/toyocc/p/6536573.html
Copyright © 2011-2022 走看看