<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. 从JVM内存管理的角度谈谈JAVA类的静态方法和静态属性

    在JVM中,内存分为两个部分,Stack(栈)和Heap(堆),这里,我们从JVM的内存管理原理的角度来认识Stack和Heap,并通过这些原理认清Java中静态方法和静态属性的问题. 一般,JVM的 ...

  2. app与手机其他软件交互测试

    针对智能终端应用的服务等级划分方式及实时特性所提出的测试方法.交叉测试又叫事件或冲突测试,是指一个功能正在执行过程中,同时另外一个事件或操作对该过程进行干扰的测试.如:App在前/后台运行状态时与来电 ...

  3. 你不知道的JavaScript--Item20 作用域与作用域链（scope chain）

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...

  4. git实用命令

    http://blog.sina.com.cn/s/blog_4ce89f2001014qvr.html 1.git clone                                     ...

  5. Python爬虫利器四之PhantomJS的用法

    前言 大家有没有发现之前我们写的爬虫都有一个共性,就是只能爬取单纯的html代码,如果页面是JS渲染的该怎么办呢?如果我们单纯去分析一个个后台的请求,手动去摸索JS渲染的到的一些结果,那简直没天理了. ...

  6. Selenium webdriver定位iframe里面元素

    在查找元素过程中,直接通过id或者xpath等找不到元素,查看页面源代码发现元素是属于iframe里,例如: <div class="wrap_login"> < ...

  7. 理解、学习与使用 Java 中的 Optional

    从 Java 8 引入的一个很有趣的特性是 Optional  类.Optional 类主要解决的问题是臭名昭著的空指针异常(NullPointerException) -- 每个 Java 程序员都 ...

  8. 从字节码和JVM的角度解析Java核心类String的不可变特性

    1. 前言 最近看到几个有趣的关于Java核心类String的问题. String类是如何实现其不可变的特性的,设计成不可变的好处在哪里. 为什么不推荐使用+号的方式去形成新的字符串,推荐使用Stri ...

  9. Jmeter----创建第一个接口测试流程

    第一步.创建线程 第二步.添加一个HTTP请求 第三步.设置request的请求头信息 根据自己需要填写的请求头信息进行填写,如下是我需要接口测试时填写的请求头 第四步.设置相关的HTTP请求参数,完 ...

  10. typeof和instansof的区别

    typeof typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.(typeof 运算符返回一个用来表示表达式的数据类型的字符串. ...