<!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. [转]ThinkPHP中如何使用原生SQL

    From : http://huangqiqing123.iteye.com/blog/1540323 TP的模型可以支持原生SQL操作,提供了query和execute两个方法,为什么原生SQL还要 ...

  2. Reloading Java Classes 201: How do ClassLoader leaks happen? Translation

    The original link : http://zeroturnaround.com/rebellabs/rjc201/ From ClassLoaders to Classes 从ClassL ...

  3. 如何使用VisualStudio2013编写和调试c语言程序

    觉得很多基础学习者对VS不太熟悉,我就转一篇觉得还不错的.转自:http://jingyan.baidu.com/article/f3ad7d0fe7ca0d09c3345b84.html 现在大多数 ...

  4. ThinkPHP3.2.3使用分页

    首先要搞清楚的就是ThinkPHP3.2.3的分页类已经被移到了Think\Page.class.php,这是跟以前的版本有些不一样的,使用起来还是跟以前版本差不多,但是默认的效果不敢恭维,所以最好是 ...

  5. 构建-13 Analyzer APK文件分析

    官方文档 使用APK Analyzer分析您的构建  [Analyze your build with APK Analyzer] Android Studio包含一个APK分析器,可在构建过程完成后 ...

  6. jquery ajax 的 $.get（）用法详解

    js文件 $(document).ready(function(){ $("form").submit(function(event) {event.preventDefault( ...

  7. Laravel 5.5 使用 Jwt-Auth 实现 API 用户认证以及刷新访问令牌

    最近在做一个公司的项目,前端使用 Vue.js,后端使用 Laravel 构建 Api 服务,用户认证的包本来是想用 Laravel Passport 的,但是感觉有点麻烦,于是使用了 jwt-aut ...

  8. AdMaster技术副总裁谈Hadoop、营销数据、Python和挖掘平台

    http://www.infoq.com/cn/news/2014/09/admaster-hadoop 卢亿雷是现任AdMaster技术副总裁,曾在联想研究院.百度基础架构部.Carbonite C ...

  9. libxml2的安装及使用[总结]

    1.前言 xml广泛应用于网络数据交换,配置文件.Web服务等等.近段时间项目中做一些配置文件,原来是用ini,现在改用xml.xml相对来说可视性更为直观,很容易看出数据之间的层次关系.关于xml的 ...

  10. Magento错误 Illegal scheme supplied, only alphanumeric characters are permitted

    1.检查表core_config_data 'web/unsecure/base_url' 和'web/secure/base_url' 的值是否是正确的链接地址 2.删除系统目录var下所有子目录及 ...