【JavaScript】深入理解JavaScript之强大的原型和原型链
由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链。
AD:
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 方法,代码如下:
- // foo 变量是上例中的
- for(var i in foo) {
- if (foo.hasOwnProperty(i)) {
- console.log(i);
- }
- }
这个版本的代码是唯一正确的写法。由于我们使用了 hasOwnProperty,所以这次只输出 moo。如果不使用 hasOwnProperty,则这段代码在原生对象原型(比如 Object.prototype)被扩展时可能会出错。
总结:推荐使用 hasOwnProperty,不要对代码运行的环境做任何假设,不要假设原生对象是否已经被扩展了。
总结
原型极大地丰富了我们的开发代码,但是在平时使用的过程中一定要注意上述提到的一些注意事项。
原文:http://www.cnblogs.com/TomXu/archive/2012/01/05/2305453.html
【JavaScript】深入理解JavaScript之强大的原型和原型链的更多相关文章
- 第一百二十九节,JavaScript,理解JavaScript库
JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...
- 理解 JavaScript call()/apply()/bind()
理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,指向被调用函数的对象.当然 ...
- 理解 JavaScript 闭包
这是本系列的第 4 篇文章. 作为 JS 初学者,第一次接触闭包的概念是因为写出了类似下面的代码: for (var i = 0; i < helpText.length; i++) { var ...
- <深入理解JavaScript>学习笔记(5)_强大的原型和原型链
前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. (prototypal :原型.学好英语还是很重要的) 虽然这经常被当作是 JavaScript 的缺点 ...
- 深入理解JavaScript系列(5):强大的原型和原型链
前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...
- JavaScript探秘:强大的原型和原型链
// foo 变量是上例中的 for(var i in foo) { if (foo.hasOwnProperty(i)) { console.log(i); } } JavaScript 不包括传统 ...
- 深入理解javascript原型和闭包 (转)
该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和闭包,当然,肯定少不了原型链和作用域链.帮 ...
- 深入理解javascript原型和闭包系列
从下面目录中可以看到,本系列有16篇文章,外加两篇后补的,一共18篇文章.写了半个月,从9月17号开始写的.每篇文章更新时,读者的反馈还是可以的,虽然不至于上头条,但是也算是中规中矩,有看的人,也有评 ...
- 深入理解Javascript中构造函数和原型对象的区别
在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...
随机推荐
- JDK - Tomcat - JSP - Servlet 配置运行全攻略(转)
http://www.cnblogs.com/myqiao/archive/2005/08/29/225497.html 花了将近两个月的时间,从 JDK 开始一步一步摸索,历经千辛万苦,终于让第一个 ...
- leetcode:Longest Substring Without Repeating Characters
Given a string, find the length of the longest substring without repeating characters. For example, ...
- 数往知来 CSS<十二>
div+css基础 一.外部样式<!--外部样式可以使网页与样式分离,分工处理 1.写网页,主要提供内容,一般都会有固定的结构,具有id等属性的标签包括特定的内容 2.根据结构写样式另存为css ...
- Spring MVC 问题列表:目录
学习SpringMVC时遇到不少问题,这里将其汇总. 1.怎么搭建SpringMVC 2.SpringMVC和Spring使用是配置到一个文件中还是两个配置文件 3.SpringMVC接受从前台请求 ...
- Android教程说明-夜神模拟器连接IDE更新让Delphi发现你的手机或夜神模拟器
相关资料: [深圳]jiuk 发布 1.官网下载模拟器http://www.bignox.com/并运行 2.打开开发者选项刚开始是看不到的->关于平板电脑->多点几次版本号->打开 ...
- MFC如何添加系统消息处理函数?
http://zhidao.baidu.com/question/318026804.html 在MFC程序中,我们并不经常直接调用Windows API,而是从MFC类创建对象并调用属于这些对象的成 ...
- OSPF ProcessID(进程号)详解
一.OSPF ProcessID本地有效 首先明确一下,OSPF ProcessID,范围为1-65535,用于在路由器本地标识OSPF进程. 看上图,R1使用进程号10创建了一个OS ...
- Codeforces 710 E. Generate a String (dp)
题目链接:http://codeforces.com/problemset/problem/710/E 加或者减一个字符代价为x,字符数量翻倍代价为y,初始空字符,问你到n个字符的最小代价是多少. d ...
- CCF 201403-3 命令行选项 (STL模拟)
问题描述 请你写一个命令行分析程序,用以分析给定的命 令行里包含哪些选项.每个命令行由若干个字符串组成,它们之间恰好由一个空格分隔.这些字符串中的第一个为该命令行工具的名字,由小写字母组成,你的程序 ...
- IllegalStateException
例1 public static void main(String[]sdf){ List<String> list = new ArrayList<String>(); li ...