首页 > 其他分享 >js对象属性继承的方式都有哪些

js对象属性继承的方式都有哪些

时间:2022-11-08 20:22:05浏览次数:46  
标签:哪些 继承 子类 js 实例 原型 属性 构造函数

对象属性继承

  • 原型继承
    - 实现方式: 将子类构造函数的原型 指向 父类构造函数的实例对象
    + 改变了子类构造函数的原型指向实现继承
    + 则子类构造函数实例对象 的原型指向 也发生变化了
    - 优点:
    + 实现了属性和方法的继承
    - 缺点:
    + 继承的属性不在子类的实例中,在原型中
    + 子类 没有自己的原型了

  • 借用继承(借用构造函数继承/借用call继承)
    - 在子类构造函数中,将父类构造函数当做普通函数通过call方法调用执行 来实现继承
    + 构造函数 也是函数,函数通过call方法调用执行会改变函数内的this指向
    - 优点:
    + 继承的属性在实例身上
    - 缺点:
    + 继承不到父类的方法(原型中的内容)

  • 组合继承
    + 借用继承 + 原型继承
    + 优点
    - 继承的属性在 实例中
    - 方法继承到了
    + 缺点:
    - 没有自己的原型
    + 子类添加方法属性的时候 是添加到父类构造函数的实例中
    - 多了一套属性

  • 拷贝继承
    - 利用for-in遍历父类构造函数的实例 添加到子类的原型中
    - 优点:
    - 属性方法都继承
    - 缺点:
    - 继承的属性不在实例本身
    -

    in 关键字
    - 语法: 字符串 in 对象
    - 结果: 布尔值
    + 判断字符串 是否在对象中 作为属性
    - 特点: 不仅会在对象本身比较,还会到原型中比较

  • 寄生式继承
    + 就是对继承对象的进一步封装拓展。


inHeritObject(o) {
    // 创建一个过渡对象
    function F() {}
    // 将父类对象的给过渡对象的原型对象上
    F.prototype = o;
    // 返回新的实例化对象
    return new F();
},
// 寄生式继承
parasiticObject(o) {
    const obj = this.inHeritObject(o);
    obj.getName = function() {
        console.log(this.name);
    }
    return obj;
}
  • ES6 中的类有指定的继承语法
    - 语法
    - 在子类定义的时候
    class 子类 extends 父类{
    constructor(){
    super(参数)
    }
    }
    - 注意:
    + 子类继承是必须 使用extends和super一起使用才可以实现完美继承
    + 在子类的constructor方法中 给实例添加属性只能在 super()之后添加
    + ES6中的类可以通过此语法 继承ES5中的构造函数

标签:哪些,继承,子类,js,实例,原型,属性,构造函数
From: https://www.cnblogs.com/maxiaohu/p/16871046.html

相关文章

  • js jsonp
    同源策略(浏览器的一种机制)概述:浏览器为了安全,他产生了一种同源策略,这个策略是为了防止一些恶意的请求,保护对应的隐私.同源策略主要是对应三个内容分别问同协议......
  • JS WEB怎么实现大文件上传
    ​ 文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦、缺乏交互、用户体验差。一、前端代码英国程序员RemySharp总结了这些新的接口 ,本文在他......
  • java读取word显示在jsp页面上
    在最近的一个项目中需要将一段字符类型的文本存为word,html并要将word的内容保存在数据库中,于是就有了如下的一个工具类,希望能对碰到这样需求的朋友提供点帮助。      ......
  • 9 个你可能从未使用过的很棒的 CSS 属性
    英文|https://javascript.plainenglish.io/9-awesome-css-properties-that-you-probably-have-never-used-8cc4c385c3c6翻译| 杨小爱如今,网络上的每个网站或Web应用程......
  • mysql根据json字段内容作为查询条件(包括json数组)检索数据
    最近用到了mysql5.7的json字段的检索查询,发现挺好用的,记录一下笔记我们有一个日志表,里面的data字段是保存不同对象的json数据,遇到想根据里面的json的字段内容作为条件查询......
  • 我的朋友因为 JSON.stringify 差点丢了奖金
    英文|https://medium.com/frontend-canteen/my-friend-almost-lost-his-year-end-bonus-because-of-json-stringify-9da86961eb9e翻译|杨小爱这是发生在我朋友身上的真......
  • 6.Json交互处理
    6.Json交互处理1.什么是JsonJSON(JavaScriptObjectNotation,JS对象标记)是一种轻量级的数据交换格式,目前使用特别广泛。采用完全独立于编程语言的文本格式来存储......
  • ES6中对象新增了哪些扩展?
    1、属性的简写ES6中,当对象键名与对应值名相等的时候,可以进行简写。consto={method(){return"Hello!";}};//等同于consto={method:function(){retu......
  • Nodejs中的this
    以下内容都是关于在nodejs中的this而非JavaScript中的this,nodejs中的this和在浏览器中JavaScript中的this是不一样的。在全局中的thisconsole.log(this);{}this.num=10;c......
  • vue.js3:div上添加右键菜单([email protected])
    一,js代码:<template><div><divstyle="width:800px;margin:auto;display:flex;flex-direction:column;"><div>请选择上传图片:<inputtype="......