<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. Java 面试知识点解析(七)——Web篇

    前言: 在遨游了一番 Java Web 的世界之后,发现了自己的一些缺失,所以就着一篇深度好文:知名互联网公司校招 Java 开发岗面试知识点解析 ,来好好的对 Java 知识点进行复习和学习一番,大 ...

  2. bash: scrapy: command not found

    一.场景 执行  pip install scrapy 后,安装成功且执行 import scrapy  成功 二.问题 在shell中执行 scrapy 返回 bash: scrapy: comma ...

  3. python3 [爬虫实战] selenium 爬取安居客

    我们爬取的网站:https://www.anjuke.com/sy-city.html 获取的内容:包括地区名,地区链接: 安居客详情 一开始直接用requests库进行网站的爬取,会访问不到数据的, ...

  4. User Profile Service服务未能登录,无法登录

    不知你是否遇到这样的问题,某一天你打开PC,开机正常,可当你输入正确的密码回车,却发现Vista或Win7拒绝让你登录,提示"User Profile Service 服务未能登录.无法加载 ...

  5. VMware12安装虚拟机教程、Ubuntu16.04安装教程（包括vmware tools的安装）

    转自https://jingyan.baidu.com/article/c275f6ba07e269e33d756714.html 方法/步骤 1 虚拟机.Linux操作系统介绍及下载地址 虚拟机VM ...

  6. 「CodeChef Dec13 REALSET」 Petya and Sequence 循环卷积

    题目大意: 传送门 T组询问. 每组给一个数组,询问该数组是否循环移位线性无关,输出YES或NO. 题解: LCA冬令营有讲……然而当时…… 并不知道如何计算一个数组是否循环移位线性无关……网上也没有 ...

  7. BZOJ_3207_花神的嘲讽计划Ⅰ_哈希+主席树

    BZOJ_3207_花神的嘲讽计划Ⅰ_哈希+主席树 Description 背景 花神是神,一大癖好就是嘲讽大J,举例如下: “哎你傻不傻的![hqz:大笨J]” “这道题又被J屎过了!!” “J这程 ...

  8. CSS 盒模型与box-sizing

    一.盒模型 一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...

  9. appium---【已解决】【Mac】from appium import webdriver报错提示“Unresolved import webdriver”

    报错提示: from appium import webdriver提示Unresolved import webdriver 报错原因:没有安装Appium_Python_Client 解决办法: ...

  10. surging 微服务引擎 1.0 正式发布

    surging 是一个分布式微服务引擎,提供高性能RPC远程服务调用,服务引擎支持http.TCP.WS.Mqtt协议,采用Zookeeper.Consul作为surging服务的注册中心,集成了哈希 ...