<html>

    <head>

        <title>js inherit demo</title>

        <meta http-equiv="pragma" content="no-cache">

        <meta http-equiv="cache-control" content="no-cache">

        <meta http-equiv="expires" content="0" max-age="0">

    </head>

    <body>

        <h4>js inherit demo</h4>

    </body>

    <script type="text/javascript">

        //js有两种对象，一种是函数对象，一种是普通对象

        //函数对象有__proto__和prototype两种属性，而普通对象只有__proto__属性

        //js引擎基于__proto__的递归查找是所有js继承的核心！！！，因此也称为基于原型链的继承方式

        /*

        *   当创建一个function时，做了几件事情

        *   1、创建了一个普通对象base

        *-  2、创建了一个对应的原型变量@base

        *   3、普通对象中的prototype指针指向原型变量

        *   4、原型变量@base中的constructor指针（构造函数）指向base

        */

        var base = function(){

            base.prototype.name = 'hello';

            this.password       = 'fredric';

            console.log('do base constructor');

        }

        console.log(base.prototype.constructor == base); //true

        console.log(base.prototype);

        console.log(base.__proto__);

        //此时b是一个object而非base

        //普通对象只有__proto__属性指向其原型链

        var b = new base(); //do constructor

        /*

        * 1、创建一个空的obj

        * 2、将__proto__绑定到对象的原型，即base.prototype

        * 3、执行base函数

        */

        b.age = 4;

        console.log(b.__proto__ == base.prototype); //true

        console.log(b.__proto__.name == b.name); //true

        console.log(b.password);

        //此时b本身没有name属性，于是js引擎会到b的__proto__里去找，如此往复，因此实现了继承的效果

        //如下：b.__proto__.__proto__.name

        console.log(b);

        //第二种继承的方式

        var extend = function(){

            console.log('do extend constructor');

        }

        console.log(extend.prototype.constructor == extend); //true

        //执行顺序如下：

        //1. 创建一个空的obj赋值给extent.prototype

        //2. extend.prototype.__proto__指向base.prototype

        //3. 执行base函数，即打印do base constructor

        extend.prototype = new base();

        console.log(extend.prototype.__proto__ == base.prototype); //true

        var e = new extend();

        console.log(e.__proto__ == extend.prototype); //true

        console.log(e);

    </script>

</html>

javascript面向对象理解的补充的更多相关文章

  1. Javascript 面向对象编程（补充）：封装

    Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果 ...

  2. 03.JavaScript 面向对象精要--理解对象

    JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...

  3. 深入理解Javascript面向对象编程

    深入理解Javascript面向对象编程 阅读目录 一:理解构造函数原型(prototype)机制 二:理解原型域链的概念 三:理解原型继承机制 四:理解使用类继承(继承的更好的方案) 五:建议使用封 ...

  4. JavaScript面向对象的理解

    JavaScript面向对象的理解  笔记链接: http://pan.baidu.com/s/1c0hivuS 1:JavaScript 中分两种对象,函数对象和普通对象new Function() ...

  5. JavaScript 面向对象的程序设计（一）之理解对象属性

    首先,JavaScript 面向对象的程序设计,主要分三部分. 理解对象属性: 理解并创建对象: 理解继承. 本文主要从第一方面来阐述: 理解对象属性 首先我们来理解Javascript对象是什么?在 ...

  6. javascript javascript面向对象的理解及简单的示例

    javascript面向对象的理解及简单的示例 零.本节重点: 1.封装: 2.继承: 壹.下面理解: 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的 ...

  7. 深入理解 JavaScript 面向对象

    我们在学习编程时,避免不了会接触一个概念,叫:面向对象编程(Object-oriented programming,缩写:oop) (不是搞对象那个对象哈),其实我们的编程方式,不止有面向对象,还有 ...

  8. 全方位深入理解JavaScript面向对象

    JavaScript面向对象程序设计 转载:https://blog.csdn.net/lihangxiaoji/article/details/79753473#72__871 本文会碰到的知识点: ...

  9. javascript面向对象个人理解

    1. javascript面向对象特性:抽象性,封装性,继承性: 2. js中的对象:键值对的集合:比如说{key:value} 3.抽象性:用一个对象描述一个数据,需要抽取这个对象的核心数据:两个必 ...

随机推荐

  1. Linux时间子系统之四：Timer在用户和内核空间流程

    用户空间应用中创建一个Timer(alarm/setitimer/POSIX Timer等等),然后程序继续执行: 内核进入创建/设置Timer系统调用,开始计时,在超时后通过何种方式通知用户空间: ...

  2. sql server导出数据结构

    http://jingyan.baidu.com/article/eae07827ad76ba1fed548573.html

  3. pymongo的使用

    利用python操作mongodb需要导入pymongo库   pip install pymongo 1.连接mongodb     import pymongo     client = pymo ...

  4. 写给小前端er的nodejs,mongodb后端小攻略~ (windows系统~)

    一.写在前面 迫于学校的压力,研二上准备回学校做实验发论文了,感觉真的没意思,这几天学着搞搞后端,踩了很多坑,整理一下这几天的坑以免以后再犯! 二.本文主要内容(由于是面向前端同学的,所以前端的内容就 ...

  5. sessionStorage的保存和获取

    保存一组数组,需要转换为字符串格式: var arr = [1,2,3]; var str = JSON.stringify(arr); window.sessionStorage.setItem(' ...

  6. java.lang.OutOfMemoryError: PermGen space 解决办法

    最近在学习spring mvc时,用了大量的第三方jar包,导致启动tomcat时报内存溢出的错 java.lang.OutOfMemoryError: PermGen space 解决办法:在mye ...

  7. Java 学习笔记 (三) Java 日期类型

    以下内容摘自:  https://www.cnblogs.com/crazylqy/p/4172324.html import java.sql.Timestamp; import java.text ...

  8. Eclipse中启动tomcat: java.lang.OutOfMemoryError: PermGen space的解决方法

    tomcat启动的时候出现这种错误一般是项目引用了太多的jar包,或者反射生成了太多的类,或者有太多的常量池,导致非堆内存中永久保存区域不够,就有可能会报java.lang.OutOfMemoryEr ...

  9. http.go

    )         }         if name != cfgName {             continue         }         return val.FieldByNa ...

  10. BZOJ_2068_[Poi2004]SZP_树形DP

    BZOJ_2068_[Poi2004]SZP_树形DP Description Byteotian 中央情报局 (BIA) 雇佣了许多特工. 他们每个人的工作就是监视另一名特工. Byteasar 国 ...