this

作者: 哈哈洽洽 | 来源:发表于2018-05-14 15:42 被阅读8次

    this

    this在面向对象编程过程中非常重要,它的值取决于调用模式

    在js中一共有四种调用模式:方法调用模式、函数调用模式、构造器调用函数和apply调用模式。这四种模式在初始化参数this上是存在着差异的。

    方法调用模式

    当函数被保存为对象的一个属性,我们称之为它的一个方法。

    方法调用模式定义:调用表达式包含一个提取属性的动作(即包含一个.点表达式或者[]下标表达式),那么它就是当作一个方法来调用。

    看个简单的例子:

    var name = "window";   
    var xiaoming = {
        name: "xiaoming",
        lastname:'wang',
        saylastname:function(){
            console.log(this.lastname)
        }
    };
    console.log(xiaoming.saylastname()); //wang
    
    

    方法是可以使用this访问自己所属的对象。this对对象的绑定是发生在调用的时候!(强调)是发生调用的时候。

    这样通过this取得他们所属对象的上下文的方法也称之为公共方法。

    函数调用模式

    函数调用模式定义:当一个函数并非一个对象的属性时,那么它就是被当作一个函数来调用的。以此模式调用函数时,this会被绑定到全局变量,也就是window对象。需要⚠️的是,在严格模式下,this的值为undefined。

    延续上个模式的例子:

    var a = xiaoming.saylastname;
    a();  //window
    
    

    这个例子最好的说明:函数调用并非一个对象的属性,就被当作一个函数来调用。

    构造器函数

    构造器调用模式定义:如果创建的目的就是i 希望结合new关键字前缀来调用,那它就被称为构造器函数。

    如果在一个函数前面带上new来调用,那么就会创建一个链接到该函数的prototype成员的新对象,同时也会被绑定到哪个欣对象上。

    看这个例子:

    var Person = function(Name){
            this.name = Name;
        };
    //给person的所有对象提供一个公共方法
    Person.prototype.say = function(){
        return this.name;
    };
    //构造一个person实例
    var xiaoming = new Person('xiaoming');  
    console.log(xiaoming.say()); //xiaoming
    
    

    在构造区函数中,通常会以大写约定,这样它们会保存在以大写格式命名的变量中。这样的约定会得意更加容易区分这是构造器函数变量。

    ⚠️ 当然这样的构造器函数形式我们并不常用。之后我也会介绍更好的替代方式。

    apply调用模式

    apply调用模式定义:函数可以拥有方法。apply方法让我们构建一个参数数组传递给调用函数,同时它也允许我们选择this的值。

    简单的说就时绑定this指向的对象。

    apply可以接收2个参数,参数1:要绑定给this的值;参数2:数组参数。

    看两个例子:

    var add = function(num1,num2){
        return num1 +num2;
    }
    var arr = [4,5];
    var sum = add.apply(null,arr);
    console.log(sum); //9
    
    var xiaohong = {
        name:'xiaohong'
    }
    var xiaohongname = Person.prototype.say.apply(xiaohong);
    console.log(xiaohongname); //xiaohong
    
    

    第一个例子:是最典型的aplly方法的使用。

    第二个例子中本身小红对象没有say方法,但是我们可以通过apply方法将say方法传递给调用对象,也可以说绑定给指定的对象,而this也指向这个对象。

    总结

    所以说我们应该牢牢记住this的值取决于调用的模式。这样才会让我们了解初始化参数this存在的差异。

    相关文章

      网友评论

          本文标题:this

          本文链接:https://www.haomeiwen.com/subject/pzhjdftx.html