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. rsync异机备份

    参考http://www.cnblogs.com/itech/archive/2009/08/10/1542945.html 1.服务器 新建/etc/rsyncd.conf  ->新建/etc ...

  2. Sublime Text 2 配置

    设置Python的Tab缩进为四个空格,打开一个Py文件 # Preferences---->Settings-More---->Syntax Specific-User # 贴入如下代码 ...

  3. hmtl初学

    hmtl+css实现小车轮子转动! <!DOCTYPE html>   <html>   <head lang="en">   <meta ...

  4. SpringMVC——form标签的使用

    ----------------------------------------------------------------------------------- <%@page impor ...

  5. 自动选中div中的文字

    <html> <head> <title></title> <script type="text/javascript" de ...

  6. Spring 学习总结 使用静态工厂创建Bean

    创建Bean时,class属性必须指定,此时为静态工厂类. factory-method指定静态工厂方法名. 接口: public interface Being { public void test ...

  7. linux系统的初化始配置 IP 主机名 防火墙 selinux

    本次内容包括Linux:ip.主机名.关闭firewalld与selinux 开机临时生效和永久生效 ------------------------------------------------- ...

  8. Mysql 自定义HASH索引带来的巨大性能提升----[真相篇]

    推倒重来 俗话说no zuo no die why you try,这时候我又忍不住zuo了,吭哧吭哧的把解决过程发上博客,向全世界宣布,哥又搞定个难题. 剧情的发展往往是看起来主角完全掌握了局势的情 ...

  9. java的基本认识

    一.java的特点: 1.跨平台性:不受计算机硬件及操作系统的约束而在任意计算机环境下运行. 2.面向对象:以对象为基本粒度,基下包含属性和方法. 3.安全性:语言级安全性.编译性安全性.运行时安全性 ...

  10. 【uTenux实验】集合点端口

    这个是头一次接触的概念.比较不好理解.内核规范中的说明就要20页! 看了王总写的uTenux内核规范之后,有那么一点明白了但理解不深. 集合点端口就像每次工作前的收集情况会.首长下达收集情况指令,各个 ...