JavaScript基础教程 没有this的JavaScript
沉沙 2018-10-31 来源 : 阅读 1625 评论 0

摘要:本篇教程介绍了JavaScript基础教程 没有this的JavaScript,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。

本篇教程介绍了JavaScript基础教程 没有this的JavaScript,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。

<

 
许多JavaScript的难题都是由this引起的。this是一个很让人困惑的东西,这是由于他的语义和其他变量的词法作用域规则有着很大不同。this引用的对象常常和一个函数的词法作用域完全不相关。于是我们常常看到下面的这个小技巧:






function blah(){
    var that = this;
    somethingThatRebindsThings(function(){
        that.whatever();
    });
}  

如果你曾经做过一些JavaScript的开发,那么你一定了解其中的痛苦。想象一下,要是我们不需要this那该多好。这可能吗?听起来像是不太可能的样子!我们现在就来看看究竟能不能达成这个目标。
为什么要使用this?
我们使用this的动机常常和一个面向对象编程范式中的最有用的抽象有关:状态和行为相辅相成。尤其是在对象拥有许多属性和方法的时候。你可能会觉得如果我们不使用this的话,可能会丢掉这个强大的抽象。如果不使用this,这些对象该怎么来引用它的方法和属性呢?也许你已经猜到了答案:闭包。
如果你仔细的考虑一下,闭包就是另一种让状态和对象相辅相成的方法。我们现在就来用一些包含闭包的代码替换传统的包含this的代码。下面我们用原生的JavaScript来实现一个Car类型:
function Car(numberOfDoors){
  this.numberOfDoors = numberOfDoors;
  this.numberOfWheels = 4;

  this.describe = function(){
    return "I have " + this.numberOfWheels +
      " wheels and " + this.numberOfDoors + " doors.";
  }
}

var sportsCar = new Car(2);
console.log( sportsCar.describe() );  

如果使用闭包的话,我们可以用下面的代码来实现同样的目的:
function createCar(numberOfDoors){
  var numberOfWheels = 4;

  function describe(){
    return "I have " + numberOfWheels +
      " wheels and " + numberOfDoors + " doors.";
  }

  return {
    describe: describe
  };
}

var suv = createCar(4);
console.log( suv.describe() );

在上面的代码中,我们通过一个叫做createCar的构造器函数来实现了我们的目的。这个构造器函数定义了Car类型的所有状态和方法,同时返回了一个对象,它只暴露出一个公共行为。在这个构造器函数中定义的所有东西在外部都无法被访问到,但是由于闭包,构造器函数中定义的所有东西都可以相互访问。每次调用这个构造器函数都会创建一个新的闭包,同属创建一个新的小包裹,它包含着状态和行为。
继承
在继承中又是什么情况呢?通常来说,原型继承意味着使用this。但是我们现在不想使用this,因此我们来用另外一种方法来实现继承:
function createMiniVan(capacity){
  var car = createCar(4);
  car.capacity = function(){
    return "I have room for " + capacity + " passengers.";
  };
  return car;
}

var miniVan = createMiniVan(7);
console.log( miniVan.describe() );
console.log( miniVan.capacity() );  

在上面的例子中我创造了一个新的MiniVan类型,它从Car类型继承了所有的共有方法,同时添加了capacity方法。这样的做法和其他语言例如CLOS和Ruby中使用的混入类的概念很相似。这种方式的一个潜在的缺点是它不允许子类或者超类去访问内在的状态和行为 – 换句话说,我们在这种方法中看不到“保护”的概念。
聚合
下面我们使用聚合来为一个类型添加一个新的行为:
function createOdometer(){
  var mileage = 0;

  function increment(numberOfMiles){ mileage += numberOfMiles; }
  function report(){ return mileage; }

  return {
    increment: increment,
    report: report
  }
}

function createCarWithOdometer(numberOfDoors){
  var odometer = createOdometer();
  var car = createCar(numberOfDoors);

  car.drive = function(numberOfMiles){
    odometer.increment(numberOfMiles);
  }

  car.mileage = function(){
    return "car has driven " + odometer.report() + " miles";
  }

  return car;
}

在createCarWithOdometer构造器函数中,我们创建了一个里程表,然后使用里程表的功能来实现一些额外的方法。接着,我们创建了一个基本的car实例,并且将这个新行为混合到这个实例中。我们最后得到的是一个新的类型,它使用odometer的功能来扩展了Car类型。上面的代码完全没有使用原型继承,或者this。
真的有用吗?
这种方法之所以是有用的,有以下几个原因:

首先,它让我们避免了在使用this时遇到的混乱的情形。
在构造器函数内将我们的类型和一个临时的类型聚合起来是一种好方法。它让我们可以使用多重继承的有用的部分,同时也去除了与之相关的依赖事宜。
最后,最大的好处在于我们可以为每种类型提供可良好控制的API,所有的非公开功能都安全的隐藏在构造器函数的闭包内部。这非常有利于维护一个巨大的代码库。
   

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved