<!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. ClkLog自定义事件分析登场

     ClkLog的自定义事件分析功能在大家满满的期待下终于发布了. 这次更新我们添加了[用户关联].[事件采集].[事件分析]三大块功能点. 本次上线的自定义事件分析可以让用户根据自身业务场景创建不同维 ...

  2. 一个好的科技公司logo长这样！

    ​简介:一个好的科技logo能体现出行业独有的专业性和技术优势,让你的公司科技感加满! 近年来,越来越多的初创公司崭露头角,其中科技互联网公司的比重非常高.小云也收到很多朋友的留言,询问科技类公司应该 ...

  3. OpenTelemetry 简析

    简介: OpenTelemetry 是 CNCF 的一个可观测性项目,旨在提供可观测性领域的标准化方案,解决观测数据的数据模型.采集.处理.导出等的标准化问题,提供与三方 vendor 无关的服务. ...

  4. 参与 Apache 顶级开源项目的 N 种方式，Apache Dubbo Samples SIG 成立！

    简介: 一说到参与开源项目贡献,一般大家的反应都是代码级别的贡献,总觉得我的代码被社区合并了,我才算一个贡献者,这是一个常见的错误认知.其实,在一个开源社区中有非常多的角色是 non-code con ...

  5. 基于 MySQL + Tablestore 分层存储架构的大规模订单系统实践-架构篇

    ​简介: 本文简要介绍了基于 MySQL 结合 Tablestore 的大规模订单系统方案.这种方案支持大数据存储.高性能数据检索.SQL搜索.实时与全量数据分析,且部署简单.运维成本低. ​ 作者 ...

  6. [Gse] 高效的Golang中文分析库推荐

    优点:用法简单,支持各种语言,基本满足需求. 缺点:默认分词字典文件有 8M 需测试使用速度. 我们可以直接封装一个简单的辅助方法来实现分词功能: // @author cnblogs.com/far ...

  7. dotnet 在国产 UOS 系统利用 dotnet tool 工具做文件传输

    我在一台设备上安装了 UOS 系统,但是我如何在我的主开发设备上和 UOS 系统传输文件?通过 dotnet tool 工具可以完成大部分的工作,当然,使用 dotnet tool 不仅做文件传输,还 ...

  8. 利用引用传递一次遍历构造菜单树(附java&go demo)

    目录 原理讲解 java demo Go demo 优点 原理讲解 利用引用传递,当儿子的儿子变动的时候,自己的儿子的儿子也变动(取地址) java demo package com.huiyuan. ...

  9. SpringBoot获取Bean的工具类

    1.beanName 默认是类名首字母小写 下面的类:beanName = bean1 @Component public class Bean1 { public String getBean1() ...

  10. Steam中将XBox手柄默认布局改为任天堂手柄布局的方法

    1. 在Steam菜单栏找到"查看",选择大屏幕模式. 2. 进入大屏幕模式后,在菜单界面找到"设置". 3. 在设置界面找到"控制器",选 ...