JavaScript中继承是通过原型链来体现的。

function Foo(){}

var f1=new Foo();

f1.a=10;

Foo.prototype.a=100;

Foo.prototype.b=200;

console.log(f1.a);//10

console.log(f1.b);//200

f1是Foo函数new出来的对象,f1.a是f1对象的基本属性,f1.b是怎么来的呢?——从Foo.prototype得来,因为f1.__proto__指向的是Foo.prototype。

访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着__proto__这条链向上找,这就是原型链。

那么问题来了,在实际应用中如何区分一个属性到底是基本的还是从原型中找到的呢?hasOwnProperty,特别是在for…in…循环中,一定要注意。

function Foo(){}                                               function Foo(){}

var f1=new Foo();                var f1=new Foo();

f1.a=10;                     f1.a=10;

Foo.prototype.a=100;                                        Foo.prototype.a=100;

Foo.prototype.b=200;                                       Foo.prototype.b=200;

var item;                    var item;

for(item in f1){                                               for(item in f1){

  console.log(item);//a b                                    if(f1.hasOwnProperty(item)){

}                                                                             console.log(item);//a

                             }

                          }

但是f1的这个hasOwnProperty方法是从哪里来的, f1本身没有,Foo.prototype中也没有,哪儿来的?它是从Object.prototype中来的。

对象的原型链是沿着__proto__这条线走的,因此在查找f1.hasOwnProperty属性时,就会顺着原型链最终找到Object.prototype。当然也可以自定义函数和对象来实现自己的继承。

说一个函数的例子。我们知道每个函数都有call,apply方法,都有length,arguments,caller等属性。为什么每个函数都有?这肯定是“继承”的。函数由Function函数创建,因此继承的Function.prototype中的方法。

那怎么还有hasOwnProperty呢?——那是Function.prototype继承自Object.prototype的方法。

深入理解js——继承的更多相关文章

  1. 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

    说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...

  2. 理解js继承的6种方式

    想要继承,就必须要提供个父类(继承谁,提供继承的属性) 一.原型链继承 重点:让新实例的原型等于父类的实例. 特点:1.实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性.(新 ...

  3. 深入理解JS原型链与继承

    我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...

  4. JS继承的从入门到理解

    开场白 大三下学期结束时候,一个人跑到帝都来参加各厂的面试,免不了的面试过程中经常被问到的问题就是JS中如何实现继承,当时的自己也是背熟了实现继承的各种方法,回过头来想想却不知道__proto__是什 ...

  5. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  6. 【学习笔记】深入理解js原型和闭包(6)——继承

    为何用“继承”为标题,而不用“原型链”? 原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆.而“继承”确实常用面向对象语言中最基本的概念,但是java中的继承与javascript中 ...

  7. JS继承(简单理解版)

    童鞋们,我们今天聊聊js的继承,关于继承,平时开发基本用不到,但是面试没有不考的,我就想问,这是人干的事吗? 好吧,迫于社会主义核心价值观,我们今天就来简单说一说js的继承,谁让它是面向对象编程很重要 ...

  8. 浅谈JS继承

    今天呢,我们来谈谈继承,它也是JS语言中的一大重点,一般什么时候我们会用继承呢,比如有两个拖拽的面板,两个功能基本一致,只是第二个面板多了一些不同的东西,这个时候,我们就会希望,要是第二个直接能继承第 ...

  9. js继承之call,apply和prototype随谈

    在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...

随机推荐

  1. Android 开发错误信息001

    Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessExceptio ...

  2. systemtap

    http://www.ibm.com/developerworks/library/l-systemtap/index.html http://wiki.eclipse.org/Linux_Tools ...

  3. 阻止事件冒泡两种方式:event.stopPropagation();和return false;

    jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...

  4. 接口自动化之Postman+Newman

    简介 Postman 使一款可以方便我们调用API的工具,通过Postman 与 Newman结合我们还可以批量运行API达到API自动化测试的目的. Postman 安装 Window 系统需要先安 ...

  5. 获取本机MAC地址

    <%@ page contentType="text/html; charset=GBK" %><html><head><meta htt ...

  6. MYSQL EXPLAIN 很慢的原因

    今天同事在查看一个SQL的执行计划的时候,EXPLAIN语句跑了2分钟.SQL命令类似: SELECT * FROM (SELECT USERID,COUNT(*) FROM TBNAME GROUP ...

  7. plsql登录找不到可连接数据库

    环境: OS:server 2008r2 64位 现象: plsql安装完成后,登录时数据库下拉列表为空,但主目录和oci库都能正常检测到. 原因: 系统环境变量未设置. 解决: 设置系统环境变量.t ...

  8. JSTL的test里的逻辑判断不能有空格

    前天遇到了一个bug,有一个jstl的判断语句怎么都进不去,看了半天都没有发现什么问题,最后使用最原始的方式,一行一行的删除代码,重要找到了原因,原来是jstl的test逻辑判断里面不能有空格导致的.

  9. php数据库访问

    从$res获取行数据的时候,处理mysql_fetch_row($res),还有三个方法,分别是 mysql_fetch_row($res); 返回一个所以的数组,速度较快. mysql_fetch_ ...

  10. eclipse几个注意的地方

    1.eclipse+tomcat调试java web,eclipse中更新了代码,而tomcat中代码不同步更新 1)双击eclipse tomcat server,勾选"Modules a ...