<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>实现继承的5种方式(逐渐优化)</title>

    </head>

    <body>

        <script type="text/javascript">

            //方法1 使用构造函数

            function Parent1(name) {

                this.name = name || 'meng';

            }

            function Child1(age) {

                Parent1.call(this)

                this.age = age;

            }

            let c1 = new Child1(20)

            console.log(c1)

            //方法2 使用原型

            function Parent2(name) {

                this.name = name || 'meng';

                // 对于这种是有问题的，因为子类共用一个原型

                this.friend = [1, 2, 3]

            }

            function Child2(age) {

                this.age = age;

            }

            //不能使用Parent2.prototype，否则c2.friend.push会报错，因为Parent2.prototype的原型上没有friend属性

            //Child2.prototype = Parent2.prototype

            Child2.prototype = new Parent2()

            let c2 = new Child2(21)

            let c3 = new Child2(22)

            c2.friend.push(4)

            console.log(c2)

            console.log(c3)

            //组合继承

            function Parent3(name) {

                this.name = name || 'meng';

                this.friend = [1, 2, 3]

            }

            function Child3(age) {

                Parent3.call(this)

                this.age = age;

            }

            Child3.prototype = new Parent3()

            let c4 = new Child3(21)

            let c5 = new Child3(22)

            c4.friend.push(4)

            console.log(c4)

            console.log(c5)

            //组合继承优化1 只调用一次构造函数

            function Parent4(name) {

                this.name = name || 'meng';

                this.friend = [1, 2, 3]

            }

            function Child4(age) {

                Parent4.call(this)

                this.age = age;

            }

            Child4.prototype = Parent4.prototype

            let c6 = new Child4(21)

            let c7 = new Child4(22)

            c6.friend.push(4)

            console.log(c6)

            console.log(c7)

            //组合继承优化2 使用Object.create

            function Parent5(name) {

                this.name = name || 'meng';

                this.friend = [1, 2, 3]

            }

            function Child5(age) {

                Parent4.call(this)

                this.age = age;

            }

            Child5.prototype = Object.create(Parent5.prototype)

            Child5.prototype.constructor = Child5

            let c8 = new Child5(21)

            let c9 = new Child5(22)

            c8.friend.push(4)

            console.log(c8)

            console.log(c9)

            //es6

            class Parent6 {

                constructor(name) {

                    this.name = name || 'meng'

                    this.friend = [1, 2, 3]

                }

            }

            class Child6 extends Parent6 {

                constructor(name, age) {

                    super(name);

                    this.age = age

                }

            }

            let c10 = new Child6(21)

            let c11 = new Child6(22)

            c10.friend.push(4)

            console.log(c10)

            console.log(c11)

        </script>

    </body>

</html>

其中第五种方法：

Object.create这种方式实现了将父类和子类的的原型完美分隔 。双方不会互相影响，也就是说这是确实可行较好的继承实现方式。

js 实现继承的6种方式(逐渐优化)的更多相关文章

  1. js实现继承的5种方式 （笔记）

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  2. js 实现继承的几种方式

    //js中实现继承的几种方式 //实现继承首先要有一个父类,先创造一个动物的父类 function Animal(name){ this.name = name; this.shoot = funct ...

  3. js实现继承的两种方式

    这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...

  4. js实现继承的5种方式

    js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...

  5. 深入浅出js实现继承的7种方式

    给大家介绍7中js继承的方法 有些人认为JavaScript并不是真正的面向对象语言,在经典的面向对象语言中,您可能倾向于定义类对象,然后您可以简单地定义哪些类继承哪些类(参考C++ inherita ...

  6. JS实现继承的几种方式

    前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个 ...

  7. JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式

      前  言 JRedu 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天 ...

  8. JS 面向对象 ~ 继承的7种方式

    前言: 继承 是 OO 语言中的一个最为人津津乐道的概念.许多 OO 语言都支持两种继承方式:接口继承 和 实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在 ...

  9. JS实现继承的几种方式（转）

    转自:幻天芒的博客 前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如 ...

随机推荐

  1. 嘻哈帝国第一季/全集Empire迅雷下载

    英文译名Empire,第1季(2015-01-08)FOX.本季看点:<嘻哈帝国>卢西奥斯·莱恩是一名超级音乐明星兼Empire娱乐公司的创始人,故事讲述了他如何在困境和失败中运营公司的故 ...

  2. ios成长之每日一遍(day 6)

    toolBar上的View Switcher BIDAppDelegate.h #import <UIKit/UIKit.h> @class BIDSwitchViewController ...

  3. 详细解读Volley（四）—— 自定义Request

    Volley中提供了几个Request,如果我们有特殊的需求,完全可以自定义Request的,自定义Request自然要继承Request,那么本篇就教大家来一步一步地定义一个自己的Request类. ...

  4. Inferred type 'S' for type parameter 'S' is not within its bound; should extend

    在使用springboot 方法报错: Inferred type 'S' for type parameter 'S' is not within its bound; should extends ...

  5. CListCtrl 之右键菜单

    在使用CListCtrl时要为它添加一个右键菜单,步骤如下: 1. 响应CListCtrl的NM_RCLICK消息. 2. 添加一个菜单资源,在菜单资源中插入要添加到菜单内容.   一般存在两种方法: ...

  6. css3 animation 学习

    css3中可以实现动画效果,主要是通过css3中新增加的属性(transform , transition,animation )来完成. 他们的详细解释可以参考 W3CSCHOOL 下面是效果图: ...

  7. Android -- Handling back button press Inside Fragments

    干货(1) 首先创建一个抽象类BackHandledFragment,该类有一个抽象方法onBackPressed(),所有BackHandledFragment的子类在onBackPressed方法 ...

  8. 从item-base到svd再到rbm，多种Collaborative Filtering(协同过滤算法)从原理到实现

    http://blog.csdn.net/dark_scope/article/details/17228643 〇.说明 本文的所有代码均可在 DML 找到,欢迎点星星. 一.引入 推荐系统(主要是 ...

  9. Logcat用法初探

    首先定位到adb所在的目录 将手机连接上电脑. 在命令行运行: adb devices 这个命令可以列出所有连上的移动设备. 在命令行运行: adb logcat 可以显示日志.   以下是例子截图: ...

  10. 清空npm缓存

    nodejs 清空 npm 缓存 npm cache clean -f