<!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. Java List集合冒泡法排序的两种实现

    冒泡排序(Bubble Sort)是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已 ...

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

    iOS 屏幕方向那点事儿http://zhenby.com/blog/2013/08/20/talk-ios-orientation/ 针对当前的屏幕方向进行对应的代码布局 BIDViewContro ...

  3. ios成长之每日一遍(day 4)

    今天, 主要讲四种常见的问题, 废话不多说了, 直接开始. 自动布局:这个我发现有一篇文章写得非常好, 直接表明出地http://www.cocoachina.com/applenews/devnew ...

  4. Activity间用Intent、Bundle、onActivityResult进行传值

    其实Activity间的传值就是通过Bundle,intent中也是自动生成了Bundle来传值,里面还有个onActivityResult()方法也可以传送数值. 如果一个Activity是由sta ...

  5. 《Google Glass开发指南》

    <Google Glass开发指南> 基本信息 作者: BestApp工作室 丛书名: 图灵原创 出版社:人民邮电出版社 ISBN:9787115349477 上架时间:2014-3-19 ...

  6. cannot import name 'main' 解决方案

    error description: pip3 install numpy Traceback (most recent call last): File "/usr/bin/pip3&qu ...

  7. Springmvc的handler method参数绑定常用的注解

    转自:http://blog.longjiazuo.com/archives/1149   1. 简介: handler method参数绑定常用的注解,我们根据他们处理的Request的不同内容部分 ...

  8. httpModules 不起作用 modules 不起作用 血泪经验

    本人也搜索了哏多解决方案.最后都没有解决... 劝您还会放弃把.. 如果非要用,劝您吧代码写到  Global.asax   里...(血泪经验)

  9. 数学图形(1.47)贝塞尔(Bézier)曲线

    贝塞尔曲线又称贝兹曲线或贝济埃曲线,是由法国数学家Pierre Bézier所发现,由此为计算机矢量图形学奠定了基础.它的主要意义在于无论是直线或曲线都能在数学上予以描述. 上一节讲的是高次方程曲线, ...

  10. mysql 5.1简明教程

    第一章Mysql简介与安装 第一节 MySql简介 百度百科 第二节 MySql安装与配置 1.MySql5.1下载及安装 2.MySql数据库编码配置 UTF-8 3.MySql图形页面sqlyog ...