javascript代码实例教程-Javascript中关键参数this浅析

发布时间:2019-01-26 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Javascript中关键参数this浅析脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。  自从接触javascript以来,对this参数的理解一直是模棱两可。虽有过深入去理解,但却也总感觉是那种浮于表面,没有完全理清头绪。废话不多,先看一个板栗:

 

 

VAR test = function(){};

 

test.PRototyPE = {

    foo:"apple",

    fun:function(){

        this.foo="banana";

    }

};

 

var myTest = new test();

myTest.fun();

 

console.LOG(myTest.hasOwnProperty("foo"));  //输出什么    

console.log(myTest.hasOwnProperty("fun"));  //输出什么

hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。

   不知道看官们心里的答案是什么,正确的答案是true,false。

 

 

console.log(myTest.hasOwnProperty("foo"));

console.log(myTest.hasOwnProperty("fun"));

 

true

false

  要弄明白为什么是这样,就必须要理解上面this所扮演的角色,所指代的对象。在《javascript语言精粹》一书中,指出了在javascript中一共有四种调用模式:

 

  方法调用模式

  函数调用模式

  构造器调用模式

  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变量依旧绑定到该对象,有如下经典解决方案:

 

 

// 给myObject增加一个double方法

 

var myObject = {

    value: 0;

    increment: function(inc) {

        this.value += typeof inc ==='number'?inc:1; // 接受一个可选参数,如果不是数字,则默认为数字1

    }

};<br><br>;myObject.increment(2);

 

myObject.double = function () {

    var that=this;  //解决方法

     

    var helper= function () {

        that.value=add(that.value,that.value);

    };

    helper();

};

myObject.double();  //以方法的形式调用double

console.log(myObject.getValue());   //6

  即是给该方法定义一个变量并且把它赋值为this,那么内部函数就可以通过那个变量访问到this,按照约定,给那个变量命名为that。

 

 

 

  构造器调用模式

 

  构造器调用模式即是我一开头给出的例子所提到的。如果在一个函数前面带上new来调用,那么将创建一个连接到该函数的prototype成员新对象,同时this将会被绑定到那个新对象上。听上去十分拗口且难以理解,先再看个demo:

 

 

//构造一个名为Quo的构造器函数,带有一个status属性的对象<br><br>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了。

 

  

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Javascript中关键参数this浅析全部内容,希望文章能够帮你解决javascript代码实例教程-Javascript中关键参数this浅析所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。