文档章节

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
深圳
前端工程师
私信 提问
全面理解面向对象的 JavaScript

简介: JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或者只是部分具备一些面向对象的特征。本...

IBMdW
2013/04/21
1K
6
Cocos2d-JS中JavaScript继承

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

智捷课堂
2015/03/17
0
0
JavaScript instanceof 运算符深入剖析

随着 web 的发展,越来越多的产品功能都放在前端进行实现,增强用户体验。而前端开发的主要语言则是 JavaScript。学好 JavaScript 对开发前端应用已经越来越重要。在开发复杂产品中,需要使用...

IBMdW
2013/06/14
356
1
[Javascript]继承机制的设计思想

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

亭子happy
2012/09/29
0
3
JavaScript 中的继承:ES3、ES5 和 ES6

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

天方夜
2018/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何在 Linux 系统查询机器最近重启时间

在你的 Linux 或类 UNIX 系统中,你是如何查询系统上次重新启动的日期和时间?怎样显示系统关机的日期和时间? last 命令不仅可以按照时间从近到远的顺序列出该会话的特定用户、终端和主机名...

来来来来来
29分钟前
0
0
Redis协议是什么样的

前言 我们用过很多redis的客户端,有没有相过自己撸一个redis客户端? 其实很简单,基于socket,监听6379端口,解析数据就可以了。 redis协议 解析数据的过程主要依赖于redis的协议了。 我们...

春哥大魔王的博客
46分钟前
2
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxCool
今天
1
0
携程Apollo统一配置中心的搭建和使用(java)

一.Apollo配置中心介绍 1、What is Apollo 1.1 Apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境、不同集群的配置,配置修改后能够实时推送到...

morpheusWB
今天
1
0
远程获得的有趣的linux命令

使用这些工具从远程了解天气、阅读资料等。 我们即将结束为期 24 天的 Linux 命令行玩具日历。希望你有一直在看,如果没有,请回到开始,从头看过来。你会发现 Linux 终端有很多游戏、消遣和...

Linux就该这么学
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部