<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. 《Hadoop金融大数据分析》读书笔记

    <Hadoop金融大数据分析> Hadoop for Finance Essentials 使用Hadoop,是因为数据量大数据量如此之多,以至于无法用传统的数据处理工具和应用来处理的数据 ...

  2. 关于JSON字符串的处理与总结 【原创】

    这两天帮另一个实习生处理点前端的问题 遇到点JSON的处理 总结如下 ①一个JSON字符串    JSON.Parse(JSON字符串)—>JSON对象Object ②一个JSONArray   ...

  3. Javascript高级程序设计复习——第五章引用类型 【原创】

    5.1  Object类型 1:创建Object实例的两种方式 ①new构造法 var obj1 = new Object(); 注意大写!不传递参数时可以省略圆括号 obj1.hehe = &quo ...

  4. PHP与XML技术

    XML的概述 XML(eXtensibleMarkup Language),扩展性标记语言,它是用来描述其他语言的语言.它允许用户设计自己的标记.XML是由W3C(WorldWide 月发布的一种标准 ...

  5. TestNG失败用例自动截图

    参考:https://blog.csdn.net/wangxin1982314/article/details/50247245 1. 首先写一个截屏方法 public class ScreenSho ...

  6. 使用代码的方式给EntityFramework edmx 创建连接字符串

    在构建上下文的时候动态生成连接字符串: /// <summary> /// 从配置生成连接 /// </summary> private static readonly str ...

  7. bolt_storage.go

    package, * time.Second})     if err != nil {         return nil, err     }     err = db.Update(func( ...

  8. 【刷水】之USACO2008资格赛(Bzoj1599-1603)

    做之前真是没想到有这么水>.< 但做了还是发上来吧>.< 就当是刷一刷AC量&1A率什么的>.< Bzoj1599: [Usaco2008 Oct]笨重的石 ...

  9. BZOJ_1212_[HNOI2004]L语言_哈希

    BZOJ_1212_[HNOI2004]L语言_哈希 Description 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写 ...

  10. ABP学习笔记(1)-使用mysql

    前言 开始学习ABP啦 下载官方模板 ​ 下载地址: https://aspnetboilerplate.com/Templates ​ 我这边选择的是.NET Core+VUE 移除SqlServe ...