文档章节

JavaScript面向对象继承机制

J
 Jia。
发布于 2016/12/01 20:42
字数 503
阅读 30
收藏 0

原型概念

  • 每一个JavaScript对象(null除外)都和另一个对象相关联,‘另一个’对象就是原型,每一个对象都从原型继承属性。
  • 所有通过对象直接量创建的对象都具有同一个原型对象,并可以通过JavaScript代码Object.prototype获得原型对象的引用。通过关键字new和构造函数调用创建的对象的原型就是构造函数的prototype属性的值。
  • 在JavaScript中,类的所有实例对象都从同一个原型对象上继承属性。

继承方式

原型继承

  • 让自身的原型指向父类的实例
  • 代码
 /**
    * Description: 创建父类
    */
   function parentA() {
       this.say = function () {
           alert('Hello World!');
       }
   }

   /**
    * Description: 创建子类
    */
   function subB() {

   }

   // 原型继承
   subB.prototype = new parentA();

   // 创建subB的实例
   var b = new subB();

   b.say(); // 弹出Hello World!

原型冒充继承

  • 在运行自身的构造时,先运行父类的构造函数
  • 代码
    /**
     * Description: 创建父类
     */
    function parentA(job) {
        this.job  = job;
        this.say  = function () {
            alert('Hello World!');
        }
    }

    /**
     * Description: 创建子类
     * 在运行自身的构造函数时使用apply方法先运行父类的构造函数
     */
    function subB(name) {
        this.parent = parentA;              // 把parentA赋值给subB的parent属性
        this.parent.apply(this, arguments); // 用this调用parentA的构造函数

        delete this.parent;                 // 调用完成之后,删除parent这个属性
        
        this.name = name
    }

    // 创建subB的实例
    var b = new subB();

    b.say(); // 弹出Hello World!

复制继承

  • 把父类的属性copy到自身
  • 代码
    /**
     * Description: 创建父类
     */
    function parentA(job) {
        this.job  = job;
        this.say  = function () {
            alert('Hello World!');
        }
    }

    /**
     * Description: 创建子类
     * 把父类的属性copy到自身
     */
    function subB(name) {
        this.name = name;

        this.extend = function (parent) {
            for(var key in parent) {
                this[key] = parent[key];
            }
        }
    }

    // 创建subB的实例
    var b = new subB();

    b.say(); // 报错 b.say is not a function

    // 复制父类的属性到自身
    b.extend(new parentA());

    b.say(); // 弹出 Hello World!

© 著作权归作者所有

共有 人打赏支持
J
粉丝 0
博文 4
码字总数 1627
作品 0
深圳
前端工程师
Cocos2d-JS中JavaScript继承

JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求。由于Cocos2d-JS引擎是从Cocos2d-x演变而来的,在Cocos2d-J...

智捷课堂
2015/03/17
0
0
JavaScript 中的继承:ES3、ES5 和 ES6

选择一种继承方式 JavaScript 是一门动态语言,动态意味着高灵活性,而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式,可以分成下面四类: Mixin 模式,即属性混入,从一个...

天方夜
07/04
0
0
[Javascript]继承机制的设计思想

作者: 阮一峰 日期: 2011年6月 5日 我一直很难理解Javascript语言的继承机制。 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(...

亭子happy
2012/09/29
0
3
JavaScript继承详解(四)

文章截图 - 更好的排版 在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript。 Crockford是JavaScript开发社区最知名的权威,是JSO...

solu
2010/12/25
0
0
JavaScript 面向对象学习——2

继承是面向对象的特性(封装、抽象、继承、多态)之一,JavaScript作为面向对象语言自然拥有继承的特性。如果想要真正理解JavaScript的继承机制,那么应该从JavaScript对象的原型说起。 1 pr...

learn_more
2014/12/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux学习-0919

linux和windows互传文件 用户配置文件和密码配置文件 用户组管理 用户管理 一、linux和windows互传文件 linux和windows可以互相传输文件,但是需要使用xshell 并且安装lrzsz包: yum insta...

wxy丶
24分钟前
1
0
收集几个开源的微信小程序开发框架

1、 mpvue mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小...

哥本哈根的小哥
31分钟前
1
0
Golang CSP并发模型

今天介绍一下 go语言的并发机制以及它所使用的CSP并发模型 CSP并发模型 CSP模型是上个世纪七十年代提出的,用于描述两个独立的并发实体通过共享的通讯 channel(管道)进行通信的并发模型。 CS...

xtof
31分钟前
1
0
用chrome在电脑上模拟微信内置浏览器

先了解安卓微信和Ios微信的UA(User agent:用户代理) 安卓微信UA: mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534.30 (khtml, like gecko) ve......

可达鸭眉头一皱
38分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部