Javascript中重大参数this浅析

自打接触javascript以来,对this参数的接头一贯是心猿意马。虽有过深切去通晓,但却也总觉得是这种浮于表面,没有完全理清头绪。

但对于this参数,确实会令人暴发许多误解。那么this参数到底是何方神圣?

 

 
 理解this  

this是一个与实践上下文(execution
context,也就是成效域)相关的非凡对象。由此,它可以叫作上下文对象(也就是用来指明执行上下文是在哪个上下
文中被触发的靶子)。 

其他对象都足以做为上下文中的this的值

在一些对ECMAScript执行上下文和一些this的叙说中,this平时被错误的讲述成是变量对象的一个品质。
再重复三次:

this是举办上下文的一个特性,而不是变量对象的一个特性。
那几个特点分外重大,因为与变量相反,this从不会参加到标识符解析进程。换句话说,在代码中当访问this的时候,它的值是直接从实施上下文中获取的,并不须要任何意义域链查找。this的值只在进入上下文的时候举行一回确定。 

废话不多,先看一个板栗: 

 1 var test = function(){};
 2 
 3 test.prototype = {
 4     foo:"apple",
 5     fun:function(){
 6         this.foo="banana";
 7     }
 8 };
 9 
10 var myTest = new test();
11 myTest.fun();
12 
13 console.log(myTest.hasOwnProperty("foo"));  //输出什么    
14 console.log(myTest.hasOwnProperty("fun"));  //输出什么

style=”color: #808080; font-family: verdana, geneva; font-size: 14px;”>hasOwnProperty:是用来判断一个对象是或不是有你提交名称的属性或对象。不过须要留意的是,此措施不可能检查该对象的原型链中是或不是具备该属性,该属性必须是目的自我的一个成员。

不知底看官们心中的答案是什么样,正确的答案是true,false。

1 console.log(myTest.hasOwnProperty("foo"));
2 console.log(myTest.hasOwnProperty("fun"));
3 
4 true 
5 false 

要弄明白为啥是那般,就不可以不要知道地点this所扮演的角色,所代替的目的。在《javascript语言精彩》一书中,提议了在javascript中一共有四种调用格局:

  1. 措施调用情势
  2. 函数调用情势
  3. 构造器调用方式
  4. apply调用格局

而在这几个情势当中,对于怎么着开首化关键参数this上是存在差距差别的。

 

   方法调用方式

当一个函数被保留为对象的一个性质时,大家称它为一个措施。当一个情势被调用时,this被绑定到该目标。注意加粗的那句是非同儿戏:

// 创建myObject。它有一个value属性和一个increment方法

var myObject = {
    value: 0;
    increment: function(inc) {
        this.value += typeof inc ==='number'?inc:1; // 接受一个可选参数,如果不是数字,则默认为数字1
    }
};

myObject.increment();
console.log(myObject.value);    // 1

myObject.increment(2);          //传入数字2
console.log(myObject.value);    // 3

此地,方法increment可以运用this去访问myObject对象,所以可以更改value的值。而且,this到目标的绑定暴发在调用的时候

  

   函数调用方式

假设一个函数并非一个目的的性质时,那么它被看成一个函数来调用,那时候,this被绑定到全局对象,书上说那是js语言设计的一个缺陷。假使设计科学,当其中函数被调用的时,this应该仍旧绑定到表面函数的this变量。抛开对语言设计的正确性与否啄磨,要当函数调用方式时this变量依然绑定到该对象,看例子:

var myObject = {
    value: 1,
    getValue: function() {
        return this.value;
    },
    double: function() {
            return function (){
                    this.value = this.value * 2;
            }
    }
};

myObject.double()();  // 希望将 value 乘以 2
myObject.getValue(); // 返回 1

因为
,大家期望调用 myObject.double()() 时,value 乘以
2,可是出于 myObject.double() 再次来到的是一个函数,而 myObject.double()()
执行了回来的那个函数,此时,this被绑定到了全局 window
而不是 myObject。

有如下经典解决方案:

var myObject = {
    value: 1,
    getValue: function() {
        return this.value;
    },
    double: function() {
            var that = this;
            return function (){
                    that.value = that.value * 2;
            }
    }
};

myObject.double()();
myObject.getValue(); //2

即是给该形式定义一个变量并且把它赋值为this,那么内部函数就足以经过丰裕变量访问到this,依照预订,给那么些变量命名为that。

 

   构造器调用情势

构造器调用形式即是我一开首给出的例子所涉嫌的。假如在一个函数前边带上new来调用,那么将开创一个接连到该函数的prototype成员新对象,并且this将会被绑定到足够新对象上。听上去更加拗口且难以知晓,先再看个demo:

//构造一个名为Quo的构造器函数,带有一个status属性的对象

var Quo = function(string){
    this.status =string;
};

Quo.prototype.get_status = function(){
    return this.status;
}

var myQuo =new Quo("confuse");  //构造一个Quo实例

console.log(myQuo.get_status());  //confuse

一句话来说的话,Quo对象下的this在被用为构造一个新实例即new时,this指代的是新生成的myQuo对象而不是Quo对象自我。

一句话,重点就是:原型中的this不是指的原型对象,而是调用对象。

再回眸一先河的demo,就很好领悟了,在举办myTest.fun()时,this指代了myTest对象,所以生成了一个foo属性值为“banana”,所以myTest.hasOwnProperty(“foo”)重回值为true。

  

   Apply调用方式

因为javascript是一门函数式面向对象编程语言,所以函数可以拥有方法。apply方法让大家打造一个参数数组并用其去调用此外函数,apply方法接收七个参数,第四个是将被绑定的this的值,首个是参数数组。说简练直接一点就是apply方法能恫吓此外一个对象的措施,继承别的一个目的的属性.
推荐可以看js中apply方法的行使详细解析 ,就不摆demo了。

 

知识尚浅,若文中有不得法,请务必建议,误人子弟实乃大过。

转发申明出处:http://www.cnblogs.com/coco1s/p/3948151.html