JavaScript 编程珠玑 - 《JavaScript: The good parts》总结(1)

《JavaScript: The Good Parts》,解释了JavaScript编程的精髓。理解本书能够解释我们实际编程中遇到的很多问题,并且有助于写出高质量的代码。这里总结了一下要点,其主要内容涉及到JavaScript特殊的语法,理解Prototype,正确解析this的指代,函数对象的使用,闭包的使用等。

1. JavaScript 语法和对象的特别之处

1) 两种获取对象属性值的方法:[] 或.

      stooge[‘first-name‘]
      stooge.nickname

用[]可以取到不符合变量命名规范的属性(如‘first-name‘)。当你的JSON对象有个key值是这种名字时,就可以用[]取出它的值。

2) 属性可以动态添加;属性可以是函数(函数属性成为“方法”(method))

      flight.status = ‘overdue‘;

当status是flight的属性时,上面的结果是更新其值;当没有此属性时则添加此属性。

3)灵活使用逻辑运算符||和&&

      var status  = flight.status || "unknown";
      var model = flight.equipment && flight.equipment.model

JavaScript的||和&&运算的结果不是逻辑值true或false,而是操作数之一。上面的|| 给status一个默认值"unknown". 上面的&&给model至少一个undefined值而不至于因为flight.equipment没定义而抛出异常。

    2. 理解Prototype

我发现这本书对Prototype的解释简明扼要,比网上那些长篇大论有效多了。“每一个对象都链接到一个原型对象并从其继承属性”。(这个链接通过每个对象都有的prototype属性来实现)。换言之每个对象都有它的原型对象。所有用object literal(即{...})创建的对象都链接到Object.prototype。这个Prototype可以结合设计模式中的Prototype Pattern去理解。

1)要创建一个对象并指定另一个对象作为它的原型对象,较好的方式如下:

    if(typeof Object.create !== ‘function‘) {
        Object.create = function(o) {
            var F = function() {};
            F.prototype = o;
            return new F();
        }
    }
    var another_stooge = Object.create(stooge);

如上another_stooge将以stooge为原型,继承stooge的属性。

在对象建立后,向其原型增加的属性仍然会被该对象继承。获取对象属性值时对属性的查找策略是:沿着继承链向上查找,遇到就停止。当对象有某属性时就取该对象的该属性,没有时则向其原型对象索取。这样不断递归。“原型链条只对索取属性有效”,这句话可以解释下面的很多问题。

2) 对象的hasOwnProperty方法只在本对象中查找属性,不访问原型链条。因为那个链条只对索取属性(如obj.prop)有效。

3) delete的影响

    obj.prop        // 对象的prop属性
    delete obj.prop
    obj.prop        // undefiend,或者是obj原型的原型的。。。的prop属性

delete可以用来从一个对象obj中移除某一个属性prop。移除对原型没有影响。这也可以理解为原型链条只对索取属性有效。相反,如果原型中也有prop属性,则obj.prop将会取到原型中的值。

3. 少用全局变量!

全局变量应该尽可能少用。可以用一个唯一的全局变量作为容器,容纳所有其他的全局变量。像下面这样:

    var MYAPP = {};
    MYAPP.stooge = {};
    MYAPP.flight = {};

4.函数 

“函数是JavaScript最好的东西”。函数也是对象。一个重要的推论就是它们也链接着原型:Function.prototype。另外,每个函数对象func创建的时候也会带一个prototype属性,它的值是一个对象,这个对象带个constructor属性,其值是这个函数func...(又绕回去了...)

函数对象的建立是通过函数字面值(function literal),即function(va...){}

5. 函数的调用模式和this指代

this指代的对象由函数(function)的“调用模式”(invocation pattern)决定。有四种调用模式:

1)方法调用模式(Method Invocation Pattern)

前面提到方法是作为属性的函数。方法调用即通过对象调用函数:

      var myObj = {
        value: 0,
        increment: function(inc) {
            this.value += typeof inc === ‘number‘ ? inc : 1;
        }
      };
      myObj.increment(); // 方法调用模式
      myObj.value

如上,increment为方法,调用之后myObj.value将打出1,因为increment中的this指代myObj。

2)函数调用模式(Function Invocation Pattern)

这种指的是当函数不是对象属性时对它的调用模式。此时理论上其函数体中的this指代的是隐藏的全局对象。所以这个this没有什么用,而且不推荐用。这同样适用于内部函数。但我们经常需要在方法的内部函数中访问方法所属的对象,这就要用到“that”技巧:

      myObj.double = function() {
          var that = this;
          var helper = function() {
              that.value = add(that.value, that.value);
          }
          helper();
      }

如上helper作为double方法的内部函数,只能通过that访问到myObj对象来完成任务。

3)构造函数调用模式(Constructor Invocation Pattern)

首先要好好理解一下构造函数。构造函数一定要与new一起使用,不然后果很严重。为了提醒自己,常常把构造函数名首字母大写。但不管怎样new Constructor()的方式不推荐使用。有更好的替代方法来构造对象。

      var Quo = function (string) {
          this.status = string; //!! 注意这里用了this,不用new Quo调用时this将指向全局...
      }
      
      Quo.prototype.get_status = function {
          return this.status;
      }
      var myQuo = new Quo(‘confused‘);
      myQuo.get_status()

“当用new前缀来调用一个函数时,将建立一个新的对象,这个对象带有一个隐式的链接指向这个函数的prototype属性"。(我们前面提到每个函数都有一个prototype属性)。这时的this将指向建立的这个对象。不用new而直接调用时this将指向全局,灾难就在这里。从上面最后也可以看到对象myQuo继承了方法get_status,并且其中的this指向的是myQuo.

4)apply调用模式

apply调用可以指定this应该绑定的对象。这个也体现了函数是对象的一个结果:函数也有方法。(即apply方法)。

      var array = [3,4];
      var sum = add.apply(null, array);
      
      var statusObject = {status: ‘A-OK‘};
      var status = Quo.prototype.get_status().apply(statusObject);

如上,第二种用法将get_status方法用在statusObject上,虽然statusObject没有这个方法。同时将this指向了statusObject,得到其status属性值。

这次先分享到这里。下次分享关于闭包Closure和Module Pattern等内容。

JavaScript 编程珠玑 - 《JavaScript: The good parts》总结(1)

时间: 2024-10-19 02:08:00

JavaScript 编程珠玑 - 《JavaScript: The good parts》总结(1)的相关文章

JavaScript 编程珠玑 - 《JavaScript: The good parts》总结(2)

一.扩展函数原型的更好办法: // 定义下面的通用方法 Function.prototype.method = function (name, func) {     this.prototype[name] = func;     return this; }; // 使用上面的通用方法作为工具进行扩展,以免每次扩展都访问Function.prototype.XXX (that's ugly). Number.method('integer', function() {     return 

Javascript编程风格

转自阮一峰 http://www.ruanyifeng.com/blog/2012/04/javascript_programming_style.html 作者: 阮一峰 日期: 2012年4月27日 Douglas Crockford是Javascript权威,Json格式就是他的发明. 去年11月他有一个演讲(Youtube),谈到了好的Javascript编程风格是什么. 我非常推荐这个演讲,它不仅有助于学习Javascript,而且能让你心情舒畅,因为Crockford讲得很幽默,时不

[已读]JavaScript编程精解

译者汤姆大叔,应该很多人都知道,他写了一系列的关于闭包与作用域理解的文章,但是由于创建了一些我不理解的新名词,我不爱看. <JavaScript编程精解>算是买得比较早的一本书,那会大肆搜罗js基础书籍,这本应该是在我看完<javascript高级程序设计(第二版)>之后,紧接着看的,金玉在前,所以,原谅我对它的印象不够好,另外,我没有耐心按照书中生态圈的例子一点一点敲代码,对很多人提到的这本书的趣味性也就没有体会. 关于内容,首先,它不适合没有基础的读者看,会有一点难看懂.第二,

【转】这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已

[转]这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已 Javascript是一门很吊的语言,我可能学了假的JavaScript,哈哈,大家还有什么推荐的 本文秉承着:你看不懂是你SB,我写的代码就要牛逼. 1.单行写一个评级组件 "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);定义一个变量rate是1到5的值,然后执行上面代码,看图 才发现插件什么的都弱爆了 2.如何装逼用代码骂别人SB (!(~+[])+{})[--[~+&qu

前端代码编码和设计规范系列——JavaScript编程规范

1文档信息 条目 内容 项目编号 通用 项目名称 通用 标题 JavaScript编程规范 类别 规范文档 当前 试用草稿 摘要 当前版本 V1.0 日期 2015/11/9 作者 徐维坚(xuweijian) 文档拥有者 内部公开 文件 前端规范系列-JavaScript篇.docx 2修改历史 编号 修订人 修订内容简述 修订 日期 修订前 版本号 修订后 版本号 V0001 徐维坚 编程规范文件编写,草稿试用版公布 2015/11/10 V1.0 规范前言 良好的编程规范对于软件的开发与维

Javascript编程模式(JavaScript Programming Patterns)Part 1.

JavaScript 为网站添加状态,这些状态可能是校验或者更复杂的行为像拖拽终止功能或者是异步的请求webserver (aka Ajax). 在过去的那些年里, JavaScript libraries变得越来越流行. 如果你面对着很多的工作计划,一个很明确的道理就是在网站变得越来越复杂的情况下每次修改‘轮子“肯定让你不爽.当然我们把类库放到一边,聚焦于 JavaScript的语法,对你最有价值的东西是在你编写 JavaScript你要明确你使用的是那种”编程模式“. 下面主要介绍几个jav

javascript编程规范

一.javascript模块化编程规范: 二.关于commenjs规范和AMD规范: 根本不同:前者用于服务器端同步加载模块:后者是客户端异步加载模块. 同点:两者都有一个全局函数require(),用于加载模块:只是AMD规范中的require函数需要有2个参数. 三.CommonJS 出现时间更早,代表有:Node.js的模块系统,就是参照CommonJS规范实现的.在CommonJS中,有一个全局性方法require(),用于加载模块.假定有一个数学模块math.js,就可以像下面这样加载

总结JavaScript编程中的Promise使用

总结JavaScript编程中的Promise使用 Promise核心说明 尽管Promise已经有自己的规范,但目前的各类Promise库,在Promise的实现细节上是有差异的,部分API甚至在意义上完全不同.但Promise的核心内容,是相通的,它就是then方法.在相关术语中,promise指的就是一个有then方法,且该方法能触发特定行为的对象或函数. Promise可以有不同的实现方式,因此Promise核心说明并不会讨论任何具体的实现代码. 先阅读Promise核心说明的意思是:看

javascript数据结构和算法 第一章(Javascript编程环境和模型) 一

这一章介绍了我们在这本书中使用的描述各种数据结构和算法的Javascript的编程环境和编程架构. Javascript 环境 Javascript 在很长一段时间都是被作为web浏览器内置脚本编程语言来使用. 然而,在过去几年里,javascript编程环境得到了极大的发展,他们可以使javascript在桌面或者服务端运行. 在我们这本书中,我们使用其中的一个javascript环境:javascript shell:是Mozilla公司的javascript环境,被称为SpiderMonk