育路网学员服务电话:021-64691126

理解Javascript中的this关键字

作者:  发布时间:2015-10-30  来源:三联

  育路_上海计算机培训网搜集本文讲解了方法调用模式、函数调用模式、构造器调用模式、apply调用模式中this的不同之处,这篇文章主要介绍了深入理解Javascript中的this关键字,需要的朋友可以参考下

  自从接触javascript以来,对this参数的理解一直是模棱两可。虽有过深入去理解,但却也总感觉是那种浮于表面,没有完全理清头绪。

  但对于this参数,确实会让人产生很多误解。那么this参数到底是何方神圣?

  理解this

  this是一个与执行上下文(execution context,也就是作用域)相关的特殊对象。因此,它可以叫作上下文对象(也就是用来指明执行上下文是在哪个上下 文中被触发的对象)。

  任何对象都可以做为上下文中的this的值。在一些对ECMAScript执行上下文和部分this的描述中的 所产生误解。this经常被错误的描述成是变量对象的一个属性。 再重复一次:

  this是执行上下文的一个属性,而不是变量对象的一个属性。 这个特性非常重要,因为与变量相反,this从不会参与到标识符解析过程。换句话说,在代码中当访问this的时候,它的值是直接从执行上下文中获取的,并不需要任何作用域链查找。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中一共有四种调用模式:

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

  代码如下:

  // 给myObject增加一个double方法

  var myObject = {

  value: 0;

  increment: function(inc) {

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

  }

  };

  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属性的对象

  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了。

  相关课程推荐:网站开发工程师

更多

更多上海计算机信息请访问:上海计算机培训网
上海计算机培训咨询电话:021-51602254
课程搜索:
免责声明
① 由于各方面情况不断调整与变化,育路网所提供的所有考试信息仅供参考,请考生以权威部门公布的正式信息为准。
② 本站注明稿件来源为其他媒体的文/图等稿件均为转载稿,本站转载出于非商业性的教育和科研之目的,并不意味着 赞同其观点或证实其内容的真实性。如转载稿涉及版权等问题,请作者在两周内速来电或来函联系。
③ 凡本站注明“稿件来源:上海育路网”的所有文字、图片和音视频稿件,版权均属本网所有,任何媒体、网站或个 人未经本网协议授权不得转载、链接、转贴或以其他方式复制发表。已经本站协议授权的媒体、网站,在下载使用时必 须注明“稿件来源:上海育路网”,违者本站将依法追究责任。
论坛话题
关于育路 | 企业理念 | 诚聘英才 | 商务合作 | 网站声明
全国免费热线:400-631-6616、021-51860462 邮箱:sh_yuloo#163.com (发送邮件时请将#换成@)
@2006-2016上海育路网络科技有限公司版权所有
网站备案:京ICP备10025267号-13 | 京公网安备110108904040号
友荐云推荐