<!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. 向量数据库之Lancedb学习记录

    简介 Lancedb是一个用于人工智能的开源矢量数据库,旨在存储.管理.查询和检索大规模多模式数据的嵌入.Lancedb的核心是用Rust编写的,并构建在Lance之上,专为高性能 ML 工作负载和快 ...

  2. 对key值理解

    key相当于一种身份标识标识,就像我们的身份证用来辨识一个人一样. 每个key对应一个组件, 相同的key react会认为是同一个组件,这样后续相同的key对应组件都不会被创建.... 而有了key ...

  3. DTCC 2020 | 阿里云程实：云原生时代的数据库管理

    简介: 随着云原生技术的不断发展,数据库也逐渐进入了云原生时代.在云原生时代,如何高效.安全且稳定地管理云上与云下的数据库成为摆在企业面前的一大难题.在第十一届中国数据库技术大会(DTCC2020)上 ...

  4. 这样才是代码管理和 Commit 的正确姿势! | 研发效能提升36计

    ​简介:效能提升从小习惯开始,这样才是代码管理和 Commit 的正确姿势! ​ 专栏策划|雅纯 志愿编辑|张晟 软件交付是以代码为中心的交付过程,其中代码的作用有几点:第一,最终的制品要交付成什么样 ...

  5. Java对象转换方案分析与mapstruct实践

    简介: 随着系统模块分层不断细化,在Java日常开发中不可避免地涉及到各种对象的转换,如:DO.DTO.VO等等,编写映射转换代码是一个繁琐重复且还易错的工作,一个好的工具辅助,减轻了工作量.提升开发 ...

  6. 性能提升3倍、时延降低70%，阿里云企业级存储ESSD云盘再升级！

    9月22日,阿里云存储年度新品发布会上,阿里云基础产品资深产品总监陈起鲲发布了其全球领先的旗舰级块存储产品ESSD的两款新规格(ESSD Auto PL.ESSD PL-X),并宣布了新增的多项企业级 ...

  7. 微信小程序支付实现流程

    基本流程 用户操作流程 小程序流程 整体支付流程 代码实现 创建订单 创建订单,主要是前端将订单的信息提交到后端.但是在创建订单之前还有一些准备工作要做: 获取用户数据GetUserInfo 获取用户 ...

  8. OLAP系列之分析型数据库clickhouse集群部署(二)

    一.环境准备 IP 配置 clickhouse版本 zookeeper版本 myid 192.168.12.88 Centos 7.9 4核8G 22.8.20.11 3.7.1 3 192.168. ...

  9. Solution Set - 矩阵加速

    A[HDU2604]求不含子串010和000的,长为\(n\)的01序列数. B[HDU6470]数列\(\{a_n\}:a_1=1,a_2=2,a_n=a_{n-1}+2a_{n-2}+n^3\), ...

  10. 检索增强生成(RAG)实践：基于LlamaIndex和Qwen1.5搭建智能问答系统

    检索增强生成(RAG)实践:基于LlamaIndex和Qwen1.5搭建智能问答系统 什么是 RAG LLM 会产生误导性的 "幻觉",依赖的信息可能过时,处理特定知识时效率不高, ...