文档章节

JavaScript面向对象继承机制

J
 Jia。
发布于 2016/12/01 20:42
字数 503
阅读 32
收藏 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 模式,即属性混入,从一个...

天方夜
10/30
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

没有更多内容

加载失败,请刷新页面

加载更多

在Flutter中嵌入Native组件的解决方案

摘要: 引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择。本文希望向大家介绍AndroidView的使用方式以及在此...

阿里云官方博客
38分钟前
1
0
aws S3 util demo

package com.example.demo;import com.amazonaws.AmazonClientException;import com.amazonaws.AmazonServiceException;import com.amazonaws.auth.BasicAWSCredentials;import co......

经常把天聊死的胖子
58分钟前
4
0
linux下查看cpu、memo、io、swap性能数据脚本

直接贴脚本: 1、cpu #!/bin/bashCurrentDate=`date -d today '+%Y%m%d'`CurrentTime=`date -d today '+%Y%m%d%H%M'`mytext="$CurrentTime\t`top -b -n 1 | grep Cpu\(s\......

郑加威
今天
5
0
MySQL之——查询重复记录、删除重复记录方法大全

MySQL之——查询重复记录、删除重复记录方法大全

安小乐
今天
2
0
spring容器启动,停止,关闭事件监听-ApplicationEvent

ApplicationEvent ApplicationEvent相当于一个事件,所有自定义事件都需要继承这个抽象类。在Eclipse中Ctrl+Shift+H调用类的层次结构列表,可以看到如下 Application下抽象子类ApplicationCo...

tantexian
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部