• Javascript this的值


    参数this在面向对象的编程中非常重要,他的值取决于调用的模式。在Javascript中一共有4中调用模式:方法调用模式、函数调用模式、构造器调用模式、apply调用模式。这些模式在如何初始化关键参数this上存在差异。

    以下代码都是在同一个script中的

    方法调用模式:
    当一个函数被保存为对象的一个属性时,我们称之为一个方法。当一个方法被调用时,this被绑定到该对象上,如果调用表达式包含一个提取属性的动作,那么他就是被当做一个方法来调用。

    var myObject = {
            value : 0 ,
            increment : function (inc) {
                this.value += typeof inc === 'number' ? inc : 1 ;
            }
        };
        myObject.increment();
        console.log(myObject.value);    //1
        myObject.increment(2);
        console.log(myObject.value);    //3

    方法可以使用this访问自己所属的对象,所以它能从对象中取值或对对象进行修改,this到对象的绑定发生在调用的时候。这个超级延迟绑定使得函数可以对this高度复用。通过this可取得他们所属对象的上下文的方法称为公共方法。

    函数调用模式:
    当一个函数并非一个对象的属性时,那么台式被当做一个函数来调用的,以此模式调用函数时,this被绑定到全局对象。这是语言设计上的一个错误。倘若语言设计正确,那么当内部函数被调用时,this应该仍然绑定到外部函数的this变量。这个设计错误的后果就是方法不能利用内部函数来帮助它工作,因为内部函数的this被绑定了错误的值,所以不能共享该方法对对象的访问权。
    有一个很容易的解决方案:如果该方法定义一个变量并给他赋值为this,那么内部函数就可以通过那个变量访问到this,将该变量命名为that:

    var add = function (a,b) {
            return a+b;
        }
    myObject.double = function () {
            var that = this;
            var helper = function () {
                that.value = add(that.value,that.value);
            };
            helper();
        };
        myObject.double();
            console.log(myObject.value);    //6

    构造器调用模式:
    如果在一个函数前面带上new来调用,那么背地里将会创建一个连接到该函数的prototype成员的新对象,同时this会被绑定到那个新对象上。

        //创建一个名为Que的构造函数。它构造一个带有status属性的对象
            var Quo = function (string) {
                this.status = string;
            }
    
            //给Que的所有实例提供一个名为get_status的公共方法、
    
            Quo.prototype.get_status = function () {
                return this.status;
            };
    
            var myQuo = new Quo("confused");
            console.log(myQuo.get_status());    //confused

    一个函数,如果创建的目的就是希望结合new 前缀来调用,那么它就会被称为构造器函数。按照规定,他们保存在以大写格式命名的变量里。如果调用构造器函数时没有在前面加new,可能会发生非常糟糕的事情,既没有编译时的警告,也没有运行时的警告,所以大写约定非常重要。

    Apply调用模式:
    因为Javascript是一门函数式的面向对象编程语言,所以函数可以拥有方法。

    apply方法让我们构建一个参数数组传递给调用函数。它也允许我们选择this的值。apply方法接受两个参数,第一个是要绑定给this的值,第二个就是死一个参数数组。

    //构造一个包含两个数字的数组,并将它们相加。
            var array = [3,4];
            var sum = add.apply(null, array);
            console.log(sum);    //7
    
            //构造一个包含status成员的对象。
    
            var statusObject = {
                status : 'A-ok'
            }
    
            var status = Quo.prototype.get_status.apply(statusObject);    //这时this绑定statusObject
            console.log(status);    //"A-ok"

    以上就是this在这四种模式中的值了。

  • 相关阅读:
    001.云桌面整体解决方案实施
    Netty基础招式——ChannelHandler的最佳实践
    架构设计之数据分片
    Go是一门什么样的语言?
    Jenkins汉化配置
    Window安装构建神器Jenkins
    uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式
    如何使用Hugging Face中的datasets
    关于torch.nn.LSTM()的输入和输出
    pytorch中的nn.CrossEntropyLoss()计算原理
  • 原文地址:https://www.cnblogs.com/huzhuo/p/7466531.html
Copyright © 2020-2023  润新知