<!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. jquery插件--在input下输入密码时提示大写锁定键

    //密码大写输入提示 function capitalTip(id){ $('#' + id).after('<div class="capslock" id="c ...

  2. Oracle初级索引学习总结

    前言  索引是常见的数据库对象,建立索引的目的是为了提高记录的检索速度.它的设置好坏,使用是否得当,极大地影响数据库应用程序和Database的性能.虽然有许多资料讲索引的用法,DBA和Develop ...

  3. bat与jscript开发工具时遇到的一些问题

    之前使得bat调用luac进行编译时,会弹出一个"黑色的界面",闪烁一下,感觉不太好.而脚本vbs或者jscript调用bat是可以利用Run方法,将其第二个参数设置为0便可以隐藏 ...

  4. Android之sqlite3命令行简单使用

    首先需要定位到database所在的目录里面,然后使用命令 sqlite3 databasename(数据库的名字)进入 常用命令: 1. .table     列取该数据库下面的数据表名 2. .s ...

  5. maven与jdk版本不一致报:Unsupported major.minor version 51.0

    I recently uninstalled Java 8, to use Java 6 as I want my code/creations to be usable by more people ...

  6. bat 批处理切换到当前脚本所在文件夹

    bat 批处理切换到当前脚本所在文件夹   切换到当前脚本所在的文件夹 ? 1 cd  %~dp0 另外附上一些bat基本内容 —————————————————————————————— 批处理常用 ...

  7. VS Code .vue文件代码缩进以及格式化代码

    首先在应用商店中搜索“Vetur”插件安装,然后进行下面操作: 文件->首选项->设置,然后在右边编辑框输入以下设置: { "prettier.tabWidth": 4 ...

  8. 漂亮的CSS3提交意见输入框样式

    做了个输入框样式,如图: CSS代码如下: <喎�"http://www.2cto.com/kf/ware/vc/" target="_blank" cl ...

  9. Js组件的一些写法

    首先看下Prototype里的写法: var Class = { create: function() { return function() { this.init.apply(this, argu ...

  10. MFC剪贴板通信

    1.建立一个基于对话框的应用程序,界面如下: 2.对两个按钮进行消息响应: void CChipBoardOperateDlg::OnBnClickedBtnCopycb() { // TODO: 在 ...