<!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. D365虚拟机安装

    原本有本地VM是2023.3.31安装的,奈何微软不断升级,导致程序一些新特性用不到,例如: 1,Master Planning ---> Planning Optimization, 2,mi ...

  2. 力扣455(java&python)-分发饼干（简单）

    题目: 假设你是一位很棒的家长,想要给你的孩子们一些小饼干.但是,每个孩子最多只能给一块饼干. 对每个孩子 i,都有一个胃口值 g[i],这是能让孩子们满足胃口的饼干的最小尺寸:并且每块饼干 j,都有 ...

  3. 力扣41(java)-缺失的第一个正数（困难）

    题目: 给你一个未排序的整数数组 nums ,请你找出其中没有出现的最小的正整数. 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案. 示例 1: 输入:nums = [1,2,0 ...

  4. 用积木讲运维，这样的IT人太会了

    简介: 日志服务SLS提供数据采集.加工.分析.告警可视化与投递功能,为AIOps.大数据分析.运营服务.大数据安全等场景提供支撑,并能以搭积木的方式适配各类运维场景,辅助企业的IT决策.近日,日志服 ...

  5. Serverless 时代下微服务应用全托管解决方案

    简介: 本文介绍了 Serverless 时代下微服务的发展以及过程中遇到的相对较复杂的需求,面对这些,阿里云 Serverless 应用引擎 SAE 将"Serverless"的 ...

  6. 函数式编程的Java编码实践：利用惰性写出高性能且抽象的代码

    ​简介: 本文会以惰性加载为例一步步介绍函数式编程中各种概念,所以读者不需要任何函数式编程的基础,只需要对 Java 8 有些许了解即可. ​ 作者 | 悬衡 来源 | 阿里技术公众号 本文会以惰性加 ...

  7. IDA动态调试快捷键

    1. F2下断点2. F7进入函数,F8单步调试,F9跳到下一个断点,F2下断点,G调到函数地址3. N重名4. g跳到地址和函数名5. u取消把函数汇编变成机器码6. c就是把机器码变成汇编7. F ...

  8. JavaScript函数属性，方法，ES6拓展内容总结(箭头函数使用，rest参数)

    引言 函数在js中也是一个对象,所以它也是有着自己的属性和方法的,了解它们能更好的使用函数. // 各种样子的函数 function foo() {} function foo(a) {} funct ...

  9. containerd基本使用命令

    一.containerd简介 官 方 文 档 : https://containerd.io 在 2016 年 12 月 14 日,Docker 公司宣布将containerd 从 Docker 中分 ...

  10. 修改element，vant,mint等ui框架的样式

    vant和mint移动端常见,引入单独的css文件,在main.js中引入下即可,直接在对应的vue文件的css通过控制台查看中修改也行,再不济加!important element: 1.vue框架 ...