《高性能JavaScript》读书总结——原型链

对象成员

前面已经介绍过,访问对象成员的速度比字面量或变量要慢,某些浏览器比数组元素还要慢。这里所说的对象成员包括属性和方法。大部分的JS代码都是以面向对象风格编写的,这就导致了非常频繁的访问对象成员操作?

原型

JS的对象是基于原型的。原型是其他对象的基础,它定义并实现了一个新创建的对象所必须包含的成员列表。不同于其他编程语言的类,原型为所有对象实例所共享,因此这些实例也共享原型对象的成员。并且每个对象实例上的原型修改后,会影响原型的定义。
在Firefox,Safari,Chrome和IE11+浏览器里,对象实例可以通过proto读取原型对象。一旦创建一个内置对象(例如Object或Array)的实例,他们就会自动拥有一个Object对象作为原型。
对象可以有两种成员类型:实例成员(或own成员)和原型成员。实例成员直接存在于对象实例中,原型成员则从对象的原型继承而来。实例代码如下:

function Book(title, publisher){
    this.title = title
    this.publisher = publisher
}
var book1 = new Book("High Performance JavaScript","Yahoo! Press");
console.log(book1.title);//实例成员
console.log(book1.toString());//原型成员

如何判断对象的相关成员是否存在?是实例成员还是原型成员成员?方法如下:

console.log( book1.hasOwnProperty('title')) //true
console.log( book1.hasOwnProperty('toString')) //false
console.log('title' in book1) //true
console.log('toString' in book1) //true

原型链

一个对象实例的原型对象,如果不是Object对象,那么原型对象就还有其自己的原型对象,直到原型对象是Object对象才结束。这种原型对象的嵌套就是原型链。
Object实例的原型就是Object对象,而其他对象生成实例时,instance.proto.proto才是Object对象。
示例代码:

function Book(title, publisher){
    this.title = title
    this.publisher = publisher
}
Book.prototype.price = 1.2

var book1 = new Book("High Performance JavaScript","Yahoo! Press");

实例book1的原型(proto)是Book.prototype,而Book.prototype的原型是Object。
对象Book拥有proto和prototype两个属性,
注意prototype的使用,只有在实例中才能直接读取prototype定义的属性。

function seven() {
    this.a = 7;
}
seven.prototype.a = -1;
console.log('seven.a', seven.a); //undefine
console.log('new seven().a', new seven().a); //7

缓存对象成员值

访问对象成员时,对象在原型链的位置越深,读取的速度也就越慢。只有在必要时才使用对象成员,特别是没有必要反复多次读取同一对象成员。最佳做法是将属性值保存在局部变量中,使用局部变量代替属性以避免多次查找带来的性能开销。
实例代码如下:

function toggle(element){
    if(YAHOO.util.Dom.hasClass(element,'selected')){
        YAHOO.util.Dom.removeClass(element,'selected');
        return false;
    } else {
        YAHOO.util.Dom.addClass(element,'selected');
        return true;
    }
}

//改进后
function toggle(element){
    var dom = YAHOO.util.Dom;
    var hasClass = dom.hasClass(element,'selected');
    if(hasClass){
        dom.removeClass(element,'selected');
    } else {
        dom.addClass(element,'selected');
    }
    return !hasClass;
}

注意:
这种优化技术,并不推荐用于对象的成员方法。因为许多对象方法使用this来判断执行环境,把一个对象方法保存在局部变量会导致this的改变,从而导致异常。示例如下:

function Book(title, publisher){
    this.title = title
    this.publisher = publisher
    this.getTitle = function(){
        return this.title
    }
}

var book1 = new Book("High Performance JavaScript","Yahoo! Press")
console.log(book1.getTitle())
var mytitle = book1.getTitle
console.log(mytitle()) //throw exception

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容