<!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. ECharts海量数据渲染解决卡顿的4种方式

    场景 周五进行需求评审的时候: 出现了一个图表,本身一个图表本没有什么稀奇的: 可是产品经理在图表的上的备注,让我觉得这个事情并不简单: 那个图表的时间跨度可以是月,年,而且时间间隔很短: 这让我意识 ...

  2. 解密万亿参数M6模型预训练背后的分布式框架Whale

    ​简介: 最近,阿里云PAI团队和达摩院智能计算实验室一起发布"低碳版"巨模型M6,大幅降低万亿参数超大模型训练能耗.借助我们自研的Whale框架仅使用480卡GPU,即训练出了规 ...

  3. [公链观点] BTC 1.0, ETH 2.0, EOS 3.0, Dapp, WASM, DOT, ADA, VNT

    Dapp 发展史 WASM 兼容Web的编码方式 Cardano(ADA 艾达币) 权益挖矿 VNT chain 解决联盟链和公链的跨链基础项目 跨链项目 Polkadot (DOT 波卡币) 是不是 ...

  4. 七天.NET 8操作SQLite入门到实战 - （2）第七天Blazor班级管理页面编写和接口对接

    前言 上一章节我们引入BootstrapBlazor UI组件完成了EasySQLite后台界面的基本架子的搭建,本章节的主要内容是Blazor班级管理页面编写和接口对接. 七天.NET 8 操作 S ...

  5. dotnet 读 WPF 源代码笔记 简单聊聊文本布局换行逻辑

    在 WPF 里面,带了基础的文本库功能,如 TextBlock 等.文本库排版的重点是在文本的分行逻辑,也就是换行逻辑,如何计算当前的文本字符串到达哪个字符就需要换到下一行的逻辑就是文本布局的重点模块 ...

  6. centos中普通用户使用sudo报错：centos is not in the sudoers file. This incident will be reported.

    centos中普通用户使用sudo报错:centos is not in the sudoers file. This incident will be reported. su - chmod u+ ...

  7. 自定义Lua解析器管理器-------演化脚本V0.5

    [3]自定义Lua解析器管理器-------演化脚本V0.5 方便我们在项目中使用Lua解析方法,我们封装管理一个lua解析器,管理LuaState的方法执行. 解析器脚本: using LuaInt ...

  8. WEB服务与NGINX（11）-NGINX状态页

    nginx状态页 nginx的状态页功能用于输出nginx的基本状态信息,基于ngx_http_stub_status_module模块实现. 默认情况下不生成此模块,应使用--with-http_s ...

  9. Sublime-Text配置Less插件以及Sublime常用插件

    在上一篇文章(node.js环境在Window和Mac中配置,以及安装cnpm和配置Less环境)中提到在Node.js中配置Less环境,今天介绍如何在Sublime中运用Less.默认已经下好了s ...

  10. three.js教程3-模型对象、材质material

    1.Object3D的position和scale是三维向量Vector3 因此模型的位置和缩放等变化,也是使用Vector3的属性和方法实现,查询文档Vector3. 三维向量Vector3有xyz ...