js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承)

这篇具有很好参考价值的文章主要介绍了js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.原型链继承

实现原理:子类的原型指向父类实例。子类在自身实例上找不到属性和方法时去它父类实例(父类实例和实例的原型对象)上查找,从而实现对父类属性和方法的继承

缺点:

  • 子类创建时不能传参(即没有实现super()的功能);
  • 父类实例的修改会影响子类所有实例
        function Parent(name){
            this.name = "父级的name";
        }

        Parent.prototype.getName = function(){
            console.log("getName:"+this.name);
        }
    
        function Child(){

        }

        // 子类原型指向父类的实例
        Child.prototype = new Parent();
        Child.prototype.constructor = Child;//这句话和原型链继承没有关系,只是根据原型链规则绑定constructor

        // 测试
        var child = new Child();
        console.log(child.name);//父级的name
        child.getName();//getName:父级的name
        // 缺点:不能传参;父类实例改变子类所有实例也改变

2.构造函数继承

实现原理:子类构造函数中执行父类的构造函数,并且为父类构造函数绑定子类的this,父类的构造函数把成员属性和方法都挂到子类的this上去,这样既能避免实例之间共享一个原型实例,又能向父类构造方法传参

缺点:无法继承父类原型上的属性和方法

        // 构造函数继承
        function Parent(name) {
            this.name = name;
            console.log("父类构造函数");
        }

        Parent.prototype.getName = function () {
            console.log("getName:" + this.name);
        }

        function Child(name){
            Parent.call(this, name);
        }

        var child = new Child("张三");
        console.log(child);//Child {name: '张三'}
        // 不能继承父类原型上的方法和属性
        child.getName();//报错,child.getName is not a function

3.组合式继承

实现原理:原型链继承+构造函数继承

缺点:父类构造函数会执行两次(Parent.call()和new Parent()),这不影响子类对父类的继承,但是每次创建子类实例时原型中都会有两份相同的属性和方法

        // 组合式继承:原型链继承+构造函数继承
        function Parent(name) {
            this.name = name;
            console.log("父类构造函数");
        }

        Parent.prototype.getName = function () {
            console.log("getName:" + name);
        }

        function Child(name) {
            Parent.call(this, this.name);
        }
        Child.prototype = new Parent();
        Child.prototype.constructor = Child;

        var child = new Child("张三");
        console.log(child);//Child {name: '张三'}
        child.getName();

js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承),JS高级,javascript,js继承 

4.寄生式组合继承

实现原理:父类构造函数会执行两次(Parent.call()和new Parent()),那么在原型链继承时就只继承父类的原型,就不会执行两次父类构造函数  Child.prototype = Parent.prototype;

缺点:操作子类原型对象,会影响到父类原型对象,例如给Child.prototype增加一个getName()方法,那么会导致Parent.prototype也增加或被覆盖一个getName()方法

        // 寄生式组合继承:原型链继承(只继承父类原型)+构造函数继承
        function Parent(name) {
            this.name = name;
        }

        Parent.prototype.getName = function () {
            console.log("getName:" + this.name);
        }

        function Child(name) {
            Parent.call(this, name);
        }
        Child.prototype = Parent.prototype;
        Child.prototype.constructor = Child;

        var child = new Child("张三");
        console.log(child);//Child {name: '张三'}
        child.getName();

js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承),JS高级,javascript,js继承

4.1解决寄生式组合继承的缺点(使用Object.create()进行继承) 

如下,对Child.prototype.getName子类中原型上属性或方法进行修改时,父类也被修改

        function Parent(name) {
            this.name = name;
            console.log("父类构造函数");
        }

        Parent.prototype.getName = function () {
            console.log("父类getName");
        }

        function Child(name) {
            Parent.call(this, name);
        }
        Child.prototype = Parent.prototype;
        Child.prototype.constructor = Child;

        Child.prototype.getName = function(){
            console.log("子类getName");
        }

        var child = new Child("张三");
        console.log(child);//Child {name: '张三'}
        child.getName();
        var parent = new Parent("李四");
        parent.getName();

js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承),JS高级,javascript,js继承 

解决:加上Object.create()方法即可

        // Child.prototype = Parent.prototype;
        Child.prototype = Object.create(Parent.prototype);

 js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承),JS高级,javascript,js继承

5.ES6的Class继承

实现原理:ES6新增,是ES5中构造函数+原型链继承组合继承,寄生组合式继承的结合

缺点:兼容性不好

6.扩展——对象的几种创建方式

  • 字面量创建
  • var obj = new Object()创建
  • 构造函数创建
  • Object.create()创建
        // 字面量创建
        let obj1 = {
            name: 'lmf1',
            say() {
                console.log("lmf1 say");
            }
        }

        // new Object()创建
        let obj2 = new Object({
            name: 'lmf2',
            say() {
                console.log("lmf2 say");
            }
        });

        // 构造函数创建
        function Person(name) {
            this.name = name;
        }

        let obj3 = new Person("lmf3");
        Person.say = function () {
            console.log("静态方法");
        }
        Person.prototype.say = function () {
            console.log("lmf3 say");
        }

        // Object.create()创建
        let obj4 = Object.create(obj3);
        console.log(obj1, obj2, obj3, obj4);

js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承),JS高级,javascript,js继承文章来源地址https://www.toymoban.com/news/detail-724877.html

到了这里,关于js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 构造http请求的几种方式(附源码)

    博主个人社区:开发与算法学习社区 博主个人主页:Killing Vibe的博客 欢迎大家加入,一起交流学习~~ form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求. form 的重要参数: action: 构造的 HTTP 请求的 URL 是什么. method: 构造的 HTTP 请求的 方法 是 GET 还是

    2023年04月09日
    浏览(37)
  • JS深入学习笔记 - 第一章.构造函数原型与原型链

    1.1 概述 在典型的  OOP 语言中(如Java),都存在类的概念, 类就是对象的模板,对象就是类的实例 ,但在ES6之前,JS并没有引入类的概念。 在 ES6之前 ,对象不是基于类创建的,而是一种称为 构建函数 的特殊函数来定义对象和它们的特征。 有三种创建对象的方式: 对象字面

    2024年02月08日
    浏览(30)
  • 【Http协议④】常见的几种构造http请求的方式,form表单构造,Ajax构造,postman构造

    前言: 大家好,我是 良辰丫 ,这篇文章我将协同大家一起去学习几种构造http请求的方式.💞💞💞 🧑个人主页:良辰针不戳 📖所属专栏:javaEE初阶 🍎励志语句:生活也许会让我们遍体鳞伤,但最终这些伤口会成为我们一辈子的财富。 💦期待大家三连,关注,点赞,收藏。

    2024年02月06日
    浏览(41)
  • js常用的几种排序方式

    在JavaScript中,有多种排序方式可供选择。以下是几种常见的排序方式以及对应的示例: 冒泡排序(Bubble Sort): 冒泡排序是一种比较简单的排序算法,它重复地比较相邻的两个元素并交换位置,直到整个数组排序完成。 插入排序(Insertion Sort): 插入排序的思想是将数组分

    2024年02月14日
    浏览(32)
  • js删除数组的几种方式

    注意: 此方法改变数组的长度! 提示: 移除数组末尾的元素可以使用 pop() 方法。 slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。 注意: slice() 方法不会改变原始数组。 注意:这种方法会改变原始数组。 返回值 如果删除一个元素,则返回一个元素

    2024年02月16日
    浏览(29)
  • js判断是否为数字的几种方式

    typeof typeof 判断值是不是基本类型 number : instanceof instanceof 判断值是不是包装类 Number : Number.isInteger Number.isInteger 判断值是否是 整数 : 这几种方式的缺点,都是只能基于类型判断,无法判断字符串是否是数值。 parseInt 和 parseFloat 解析的时候遇到非法字符结束,返回解析到

    2024年02月16日
    浏览(30)
  • js fetch请求中断的几种方式

    这是官方标准手段,真正意义的阻止请求(不支持ie) 后端接口设置的两秒返回数据 默认结果: 解开定时器后: 通过promise,成功用resolve返回,失败用reject返回(浏览器上,请求依然会发出,并得到响应) 第一种方法: 运行结果: 第二种方法:

    2024年02月12日
    浏览(34)
  • C++实现回调函数的几种方式

    通常认为通过函数指针在其他地方调用函数的过程称为回调,被调用的函数称为回调函数,函数指针通过传参方式传递。 在C++的实际应用中,有很多实现回调函数的方式,不一定要传递函数指针才能实现回调,只要实现了回调的功能,都叫回调函数。 回调函数是和调用者在

    2024年02月16日
    浏览(30)
  • js中追加数据到数组的几种方式

    在JavaScript中,有多种方式可以向数组中追加数据,包括: push()方法:将一个或多个元素添加到数组的末尾,并返回新数组的长度。 var arr = [1, 2, 3]; arr.push(4); console.log(arr); // [1, 2, 3, 4] unshift()方法:将一个或多个元素添加到数组的开头,并返回新数组的长度。 var arr = [2, 3, 4

    2024年02月15日
    浏览(35)
  • js中对象进行赋值操作的几种方式

    最近开发碰到多参数赋值的问题,参数之间总是互相影响,导致出现一些奇怪的bug,查阅了相关资料,全部在这里了,记录一下,希望可以帮到有需要的人 上述代码中,obj1和obj2指向了同一块内存区域,修改obj1的age属性,也会影响到obj2的age属性。这是因为obj2只是复制了obj

    2024年02月02日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包