<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // ES5 的继承语法
        // 语法1: 原型继承
        // 语法2: 借用构造函数继承
        // 语法3: 组合继承
        // 语法1: 原型继承
        //   所谓的原型继承,就是通过 原型链 将父类构造函数 和 子类 构造函数 串联起来
        //   所谓的原型链,本质就是通过 __proto__ 将实例化对象,构造函数 串联起来,可以调用数据
        //        实例化对象,通过  __proto__ 访问 构造函数 prototype 中存储的函数方法
        //   父类构造函数 <--- 实例化对象 <--- 子类构造函数
        // 定义的父类构造函数
        // function Father(name,age){
        //     this.name = name;
        //     this.age = age;
        // }
        // Father.prototype.fun1 = function(){};
        // Father.prototype.fun2 = function(){};
        // 通过父类构造函数生成一个实例化对象
        // const objFather = new Father('张三',18);
        // 定义一个子类构造函数
        // function Son(){}
        // 在子类的 prototype 中 添加 父类构造函数生成的实例化对象
        // Son.prototype = objFather;
        // console.dir(Son);
        // 执行效果
        //    因为添加的是 父类生成的实例化对象
        //    实例化对象的属性和属性值,都是定义好的,不能修改
        //    实际上,我们可以调用的是父类的 函数方法
         
        // 语法2: 借用构造函数继承
        // 主要继承 属性 
        
        // 定义父类构造函数
        // function Father(name,age){
        //     this.name = name;
        //     this.age = age;
        // }
        // Father.prototype.fun1 = function(){};
        // Father.prototype.fun2 = function(){};
        // // 使用父类构造函数,生成一个对象
        // const objFather = new Father('张三' , 18);
        // // 定义子类构造函数
        // function Son(sex){
        //     // 调用父类构造函数,this的指向就会出现问题
        //     // 要通过 call 方法,改变this指向
        //     // 父类构造函数的this指向,应该是父类生成的实例化对象
        //     // 现在需要指向子类构造函数生成的实例化对象,也就是子类的this
        //     // 这里的this,在子类构造函数中,就是子类的this,就是指向子类构造函数生成的实例化对象
        //     // Father()构造函数,this的指向,变成了,子类this的指向,李四和20的两个实参
        //     // 就赋值给了,子类构造函数,生成的实例化对象上了
        //     // 效果是,通过父类,给子类生成的实例化对象,定义属性和属性值
        //     // 不能继承父类的函数方法
        //     Father.call(this , '李四' , 20);
        //     // 子类自定义的方法
        //     this.sex = sex;
        // }
        // const sonObj = new Son('男');
        // console.log(sonObj);
        // 语法3: 组合继承
        // 同时使用 原型继承和借用构造函数继承
        // 原型继承         可以继承父类的方法 但是不能定义继承父类的属性
        // 借用构造函数继承  可以定义继承父类的属性,但是不能继承父类的方法
        // 定义父类
        function Father(name,age){
            this.name = name;
            this.age = age;
        }
        Father.prototype.fun1 = function(){};
        Father.prototype.fun2 = function(){};
        // 使用父类构造函数,生成一个对象
        const objFather = new Father('张三' , 18);
        // 创建子类
        function Son(sex){
            // 通过借用构造函数,继承父类的属性
            Father.call(this,'李四' , 20);
            // 定义子类,自定义属性
            this.sex = sex;
        }
        // 通过原型继承,继承父类的方法
        Son.prototype = objFather;
        // 定义子类,自定义函数方法
        Son.prototype.f = function(){}
        const objSon = new Son('男');
        console.log(objSon);
        
    </script>
</body>
</html>

ES5的继承语法的更多相关文章

  1. ES5的继承和ES6的继承有什么区别？让Babel来告诉你

    如果以前问我ES5的继承和ES6的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么 ...

  2. ES6继承语法

    <!--http://www.56.com/u85/v_MTMyNjk1OTc4.html--> <!DOCTYPE html> <html> <head&g ...

  3. JavaScript之ES5的继承

    自从有了ES6的继承后,ES5的继承也退出了舞台,在实际开发也不会用得着: 先看看ES6的继承 class Father{ constructor(a){ console.log(a); } play ...

  4. C++ //多继承语法 C++中允许一个类继承多个类

    1 //多继承语法 C++中允许一个类继承多个类 2 #include <iostream> 3 #include <string> 4 using namespace std ...

  5. ES6与ES5的继承

    ES6 ES6中的类 类与ES5中的构造函数写法类似 区别在于属性要放入constructor中,静态方法和属性实列不会继承 <script> class Person{ height=& ...

  6. GOLANG的继承语法练习

    package main import( "fmt" _"sort" _"math/rand" ) // type WuDangMaster ...

  7. 继承语法含有main()方法

    package me.ybleeho; class Cleanser{ //清洁剂 private String s="Cleanser"; public void append( ...

  8. 常用es5和es6语法区别，以及三个点的用法

    链接:https://www.jianshu.com/p/b4d48e9846e7 //三个点 链接:https://blog.csdn.net/qiladuo1207/article/details ...

  9. es6继承 vs js原生继承(es5)

    最近在看es2015的一些语法,最实用的应该就是继承这个新特性了.比如下面的代码: $(function(){ class Father{ constructor(name, age){ this.n ...

  10. 【JS复习笔记】03 继承（从ES5到ES6）

    前言 很久以前学习<Javascript语言精粹>时,写过一个关于js的系列学习笔记. 最近又跟别人讲什么原型和继承什么的,发现这些记忆有些模糊了,然后回头看自己这篇文章,觉得几年前的学习 ...

随机推荐

  1. pypinyin 获取拼音，作为智能设备的唤醒比对结果

    from pypinyin import lazy_pinyin,TONE,TONE2,TONE3,NORMAL a = "小七同学" b = "小琦同学" c ...

  2. kubernetes CNI(Container Network Inferface)

    为什么需要 CNI 在 kubernetes 中,pod 的网络是使用 network namespace 隔离的,但是我们有时又需要互相访问网络,这就需要一个网络插件来实现 pod 之间的网络通信. ...

  3. EasyNLP玩转文本摘要（新闻标题）生成

    简介: 本⽂将提供关于PEGASUS的技术解读,以及如何在EasyNLP框架中使⽤与PEGASUS相关的文本摘要(新闻标题)生成模型. 作者:王明.黄俊 导读 文本生成是自然语言处理领域的一个重要研究 ...

  4. 技术干货丨云企业网CEN2.技术揭秘

    ​简介:随着企业数字化转型的加速,越来越多的企业选择了将业务部署在云上,这其中有超过20%的企业有全球组网的需求,这就使得云上网络的规模越来越大,复杂度也越来越高,为了应对这些变化,阿里云推出了升级版 ...

  5. iLogtail使用入门-iLogtail本地配置模式部署(For Kafka Flusher)

    ​简介:iLogtail使用入门-iLogtail本地配置模式部署(For Kafka Flusher). 阿里已经正式开源了可观测数据采集器iLogtail.作为阿里内部可观测数据采集的基础设施,i ...

  6. [Blockchain] Cosmos Starport 地址前缀的变更方式

    # 在新的区块链上修改 starport app github.com/hello/planet --address-prefix your_new_prefix # 在已存在的区块链上修改 `app ...

  7. 2019-9-2-dotnet-获取当前进程方法

    title author date CreateTime categories dotnet 获取当前进程方法 lindexi 2019-9-2 11:3:3 +0800 2019-09-02 10: ...

  8. Spring学习一（依赖注入/Bean/注解等）

    1.Spring依赖注入的方式. 2.依赖注入的类型 3.Bean的作用域 4.自动注入 5.使用注解的方式 6.在spring配置文件中引入属性文件 1.Spring依赖注入的方式 平常的java开 ...

  9. 通过劫持线程arena实现任意地址分配 n1ctf2018_null

    通过劫持线程arena,当堆开了一个线程之后,如果没有做好保护随之的危险也悄然而至 BUU上的n1ctf2018_null很好的说明了这个问题 题目链接:BUUCTF在线评测 (buuoj.cn) 看 ...

  10. idea在商店无法搜索到插件

    背景:我使用的版本是IDEA ultimate 2019.2 版本印象中,最初安装的时候,商店还是可以用的,突然有一天,就无法使用了.下边直入正题: 解决办法:1.首先浏览器登陆下:https://p ...