// foo 变量是上例中的
for(var i in foo) {
if (foo.hasOwnProperty(i)) {
console.log(i);
}
}

JavaScript 不包括传统的类继承模型,而是使用 prototypal 原型模型。

尽管这常常被当作是 JavaScript 的缺点被提及,事实上基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是非常easy,可是实现 JavaScript 中的原型继承则要困难的多。

因为 JavaScript 是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是须要一定时间的,今天我们就来了解一下原型和原型链。

原型

10年前。我刚学习JavaScript的时候,一般都是用例如以下方式来写代码:

<pre name="code" class="javascript">var decimalDigits = 2,
tax = 5; function add(x, y) {
return x + y;
} function subtract(x, y) {
return x - y;
} //alert(add(1, 3));

通过运行各个function来得到结果,学习了原型之后。我们能够使用例如以下方式来美化一下代码。

原型使用方式1

在使用原型之前。我们须要先将代码做一下小改动:

var Calculator = function (decimalDigits, tax) {
this.decimalDigits = decimalDigits;
this.tax = tax;
};

然后。通过给Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型。

Calculator.prototype = {
add: function (x, y) {
return x + y;
}, subtract: function (x, y) {
return x - y;
}
};
//alert((new Calculator()).add(1, 3));

这样,我们就能够new Calculator对象以后,就能够调用add方法来计算结果了。

原型使用方式2

另外一种方式是,在赋值原型prototype的时候使用function马上运行的表达式来赋值,即例如以下格式:

Calculator.prototype = function () { } ();
它的优点在前面的帖子里已经知道了。就是能够封装私有的function,通过return的形式暴露出简单的使用名称,以达到public/private的效果。改动后的代码例如以下:
Calculator.prototype = function () {
add = function (x, y) {
return x + y;
}, subtract = function (x, y) {
return x - y;
}
return {
add: add,
subtract: subtract
}
} (); //alert((new Calculator()).add(11, 3));

相同的方式,我们能够new Calculator对象以后调用add方法来计算结果了。

分步声明

上述使用原型的时候。有一个限制就是一次性设置了原型对象。我们再来说一下怎样分来设置原型的每一个属性吧。

var BaseCalculator = function () {
//为每一个实例都声明一个小数位数
this.decimalDigits = 2;
}; //使用原型给BaseCalculator扩展2个对象方法
BaseCalculator.prototype.add = function (x, y) {
return x + y;
}; BaseCalculator.prototype.subtract = function (x, y) {
return x - y;
};

首先。声明了一个BaseCalculator对象。构造函数里会初始化一个小数位数的属性decimalDigits,然后通过原型属性设置2个function,各自是add(x,y)和subtract(x,y)。当然你也能够使用前面提到的2种方式的不论什么一种,我们的主要目的是看怎样将BaseCalculator对象设置到真正的Calculator的原型上。

var BaseCalculator = function() {
this.decimalDigits = 2;
}; BaseCalculator.prototype = {
add: function(x, y) {
return x + y;
},
subtract: function(x, y) {
return x - y;
}
};

创建完上述代码以后,我们来開始:

var Calculator = function () {
//为每一个实例都声明一个税收数字
this.tax = 5;
}; Calculator.prototype = new BaseCalculator();

我们能够看到Calculator的原型是指向到BaseCalculator的一个实例上,目的是让Calculator集成它的add(x,y)和subtract(x,y)这2个function,另一点要说的是,因为它的原型是BaseCalculator的一个实例,所以无论你创建多少个Calculator对象实例,他们的原型指向的都是同一个实例。

var calc = new Calculator();
alert(calc.add(1, 1));
//BaseCalculator 里声明的decimalDigits属性,在 Calculator里是能够訪问到的
alert(calc.decimalDigits);

上面的代码。执行以后。我们能够看到由于Calculator的原型是指向BaseCalculator的实例上的,所以能够訪问他的decimalDigits属性值,那假设我不想让Calculator訪问BaseCalculator的构造函数里声明的属性值,那怎么办呢?这么办:

var Calculator = function () {
this.tax= 5;
}; Calculator.prototype = BaseCalculator.prototype;

通过将BaseCalculator的原型赋给Calculator的原型,这样你在Calculator的实例上就訪问不到那个decimalDigits值了,假设你訪问例如以下代码,那将会提升出错。

var calc = new Calculator();
alert(calc.add(1, 1));
alert(calc.decimalDigits);

重写原型

在使用第三方JS类库的时候,往往有时候他们定义的原型方法是不能满足我们的须要。可是又离不开这个类库。所以这时候我们就须要重写他们的原型中的一个或者多个属性或function。我们能够通过继续声明的相同的add代码的形式来达到覆盖重写前面的add功能,代码例如以下:

//覆盖前面Calculator的add() function
Calculator.prototype.add = function (x, y) {
return x + y + this.tax;
}; var calc = new Calculator();
alert(calc.add(1, 1));

这样。我们计算得出的结果就比原来多出了一个tax的值。可是有一点须要注意:那就是重写的代码须要放在最后,这样才干覆盖前面的代码。

原型链

在将原型链之前,我们先上一段代码:

function Foo() {
this.value = 42;
}
Foo.prototype = {
method: function() {}
}; function Bar() {} // 设置Bar的prototype属性为Foo的实例对象
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World'; // 修正Bar.prototype.constructor为Bar本身
Bar.prototype.constructor = Bar; var test = new Bar() // 创建Bar的一个新实例 // 原型链
test [Bar的实例]
Bar.prototype [Foo的实例]
{ foo: 'Hello World' }
Foo.prototype
{method: ...};
Object.prototype
{toString: ... /* etc. */};

上面的样例中。test 对象从 Bar.prototype 和 Foo.prototype 继承下来。因此,它能訪问 Foo 的原型方法 method。

同一时候,它也可以訪问那个定义在原型上的 Foo 实例属性 value。须要注意的是 new Bar() 不会创造出一个新的 Foo 实例,而是反复使用它原型上的那个实例;因此,全部的 Bar 实例都会共享同样的 value 属性。

属性查找

当查找一个对象的属性时。JavaScript 会向上遍历原型链。直到找到给定名称的属性为止,到查找到达原型链的顶部 - 也就是 Object.prototype - 可是仍然没有找到指定的属性,就会返回 undefined,我们来看一个样例:

function foo() {
this.add = function (x, y) {
return x + y;
}
} foo.prototype.add = function (x, y) {
return x + y + 10;
} Object.prototype.subtract = function (x, y) {
return x - y;
} var f = new foo();
alert(f.add(1, 2)); //结果是3。而不是13
alert(f.subtract(1, 2)); //结果是-1

通过代码执行。我们发现subtract是安装我们所说的向上查找来得到结果的,可是add方式有点小不同。这也是我想强调的,就是属性在查找的时候是先查找自身的属性,假设没有再查找原型。再没有,再往上走。一直插到Object的原型上。所以在某种层面上说。用 for in语句遍历属性的时候,效率也是个问题。

另一点我们须要注意的是,我们能够赋值不论什么类型的对象到原型上,可是不能赋值原子类型的值。比方例如以下代码是无效的:

function Foo() {}
Foo.prototype = 1; // 无效

hasOwnProperty函数

hasOwnProperty是Object.prototype的一个方法。它但是个好东西,他能推断一个对象是否包括自己定义属性而不是原型链上的属性,由于hasOwnProperty 是 JavaScript 中唯一一个处理属性但是不查找原型链的函数。

// 改动Object.prototype
Object.prototype.bar = 1;
var foo = {goo: undefined}; foo.bar; // 1
'bar' in foo; // true foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true

仅仅有 hasOwnProperty 能够给出正确和期望的结果,这在遍历对象的属性时会非常实用。 没有其他方法能够用来排除原型链上的属性,而不是定义在对象自身上的属性。

但有个恶心的地方是:JavaScript 不会保护 hasOwnProperty 被非法占用,因此假设一个对象碰巧存在这个属性,就须要使用外部的 hasOwnProperty 函数来获取正确的结果。

var foo = {
hasOwnProperty: function() {
return false;
},
bar: 'Here be dragons'
}; foo.hasOwnProperty('bar'); // 总是返回 false // 使用{}对象的 hasOwnProperty,并将其上下为设置为foo
{}.hasOwnProperty.call(foo, 'bar'); // true

当检查对象上某个属性是否存在时,hasOwnProperty 是唯一可用的方法。同一时候在使用 for in loop 遍历对象时。推荐总是使用 hasOwnProperty 方法。这将会避免原型对象扩展带来的干扰,我们来看一下样例:

// 改动 Object.prototype
Object.prototype.bar = 1; var foo = {moo: 2};
for(var i in foo) {
console.log(i); // 输出两个属性:bar 和 moo
}

我们没办法改变for in语句的行为,所以想过滤结果就仅仅能使用hasOwnProperty 方法。代码例如以下:

这个版本号的代码是唯一正确的写法。因为我们使用了 hasOwnProperty,所以这次仅仅输出 moo。

假设不使用 hasOwnProperty,则这段代码在原生对象原型(比方 Object.prototype)被扩展时可能会出错。

总结:推荐使用 hasOwnProperty。不要对代码执行的环境做不论什么如果,不要如果原生对象是否已经被扩展了。

JavaScript探秘:强大的原型和原型链的更多相关文章

  1. <深入理解JavaScript>学习笔记(5)_强大的原型和原型链

    前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. (prototypal :原型.学好英语还是很重要的) 虽然这经常被当作是 JavaScript 的缺点 ...

  2. 深入理解JavaScript系列(5):强大的原型和原型链

    前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...

  3. 【JavaScript】深入理解JavaScript之强大的原型和原型链

    由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...

  4. 浅谈javascript的原型及原型链

    浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...

  5. 理解 JavaScript 对象原型、原型链如何工作、如何向 prototype 属性添加新的方法。

    JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板.从原型继承方法和属性.原型对象也可能拥有原型, ...

  6. JavaScript学习总结(五)原型和原型链详解

    转自:http://segmentfault.com/a/1190000000662547 私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量 ...

  7. 【javascript基础】4、原型与原型链

    前言 荒废了好几天,在宿舍闷了几天了,一直想着回家放松,什么也没搞,论文就让老师催吧.不过,闲的没事干的感觉真是不好,还是看看书,写写博客吧,今天和大家说说函数的原型. 原型是什么 第一次看到这个的时 ...

  8. Javascript 原型和原型链

    先来了解一下Javascript中的原型:”原型也是一个对象,原型可以用来实现继承...“ 对于 原型,构造函数,以及实例之间的关系:“每个(构造)函数都有一个原型属性,原型对象都包含一个指向构造函数 ...

  9. javascript 原型 和 原型链

    最近几天,好些新同事来问原型,原型链啥的.本身作为菜鸟的我好像也没有好好整理过这个,这里写写自己的理解. 原型 大家都知道,JavaScript 不包含传统的类继承模型,而是使用 prototype ...

随机推荐

  1. 实现一个类似于收趣APP的功能

    近日想做一个类似于收趣APP软件的一个功能,将头条.微信等其他App的文章能够通过分享微信好友的方式分享到自己的平台软件中. 分享的方式有三种: 1.通过微信好友的方式,将文章分享给收趣. 2.复制文 ...

  2. Linq学习(四)-联合查询

    一.本将主要介绍 Union.Concat.Intersect.Except的使用操作 1.Union 查询昵称中带有Friend和带有Lee的用户 Linq (from a in Blog_User ...

  3. Linq学习(三)-基本查询

    一.本将主要介绍内容 从linq,sql,lambda三个角度比较来学习 select.orderby.分页.group by.distinct.子查询.in的用法 1.select 查询用户和它们的 ...

  4. Element type "LinearLayout" must be followed by either attribute specifications, ">" or "/>"的解决办法

    看老师的word文档开始学习.复制了一段代码,在layout中新建了一个Android XML file,发现有提示错误. 代码如下: <?xml version="1.0" ...

  5. VS2013支持多字节

    使用插件 下载地址:https://www.microsoft.com/zh-cn/search/DownloadResults.aspx?rf=sp&q=mbcs

  6. [源码阅读]RocketMQ-策略篇

    一:为什么要阅读rocketmq的源码? 1 可以了解mq的底层实现逻辑. 二:打算怎么读,行动路径是哪儿些? 1: 本地启动 2 分步调试 3  fork项目,添加中文注释,提交到自己的代码库.并改 ...

  7. 谷歌通过ajax获取本地JSON文件,为什么会提示跨域?

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 下 ...

  8. C#当中的out关键字(借鉴于CSDN)

    一丶与ref关键字一样,out关键字也是按引用来传递的.out 关键字会导致参数通过引用来传递.这与 ref 关键字类似,不同之处在于 ref 要求变量必须在传递之前进行初始化.若要使用 out 参数 ...

  9. node.js的初级使用

    node.js的初级使用 作为一个全栈开发员怎么能不会node.js了?至少得会用node搭载环境吧!话不多说直接开干! 一.下载与安装: 官网:http://nodejs.cn/ 中文文档:http ...

  10. POJ3278——Catch That Cow

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 114140   Accepted: 35715 ...