美文网首页
对象/原型/继承

对象/原型/继承

作者: jiangzj | 来源:发表于2019-05-07 16:40 被阅读0次

对象属性

一、属性类型
ECMAScript 中有数据属性访问器属性两种属性,各有 4 个描述其行为的特征,其中两种属性都有的特性是:

  • [[configurable]] 默认为 true,能否删除属性、修改属性特征、修改属性类型
  • [[enumerable]] 默认为 true,是否可枚举,即被 for-in 循环、Object.keys 等遍历到

数据属性 同时可具有:

  • [[value]] 默认为 undefined,数据值
  • [[writable]] 默认为 true,能否修改属性的值

访问器属性同时可具有:

  • [[get]] 默认为 undefined,读取属性时调用的 getter 函数
  • [[set]] 默认为 undefined,读取属性时调用的 setter 函数

需要注意的是,数据属性访问器属性不能同时存在
可以是用 Object.defineProperty或者Object.defineProperties来修改对象的属性,在使用这两个函数的时候,如果不指定,configurableenumerablewritable的默认值都为 false

原型

实例.__proto__ === 原型
原型.constructor === 构造函数
构造函数.prototype === 原型

原型链

每个对象都有 __proto__ 属性,指向了创建该对象的构造函数的原型,__proto__将对象连接起来组成了原型链,原型链可以用于实现继承共享属性

继承

一、原型链继承

  • 优点:简单
  • 缺点:多个实例共享引用类型的属性
    function Parent(age) {
        this.names = []
        this.age = age
    }

    Parent.prototype.foo = () => {}
    function Child() {}

    Child.prototype = new Parent()
    var child1 = new Child(5)
    var child2 = new Child(6)
    child1.names.push(1)
    child2.names.push(2)

二、构造函数

  • 优点:
    1.不共享引用类型的属性
    2.可传参
  • 缺点:
    1.每次创建实例都会重新创建一遍方法,函数没有复用
    2.不属于原型链的一环,子类实例不能使用父类的方法
    function Parent(age) {
        this.names = []
        this.age = age
        this.foo = function () {}
    }

    function Child(age) {
        Parent.call(this, age)
    }

    var child = new Child(11)

三、组合继承

  • 优点:
    1.原型链确保了函数复用
    2.构造函数实现了对实例属性的继承
  • 缺点:
    1.调用了两次父类构造函数
    function Parent(age) {
        this.name = 'Bill'
        this.age = age
    }
    Parent.prototype.foo = function () {}

    function Child(age) {
        Parent.call(this, age) //第二次调用构造函数
    }

    Child.prototype = new Parent() //第一次调用构造函数
    Child.prototype.constructor = Child
    var child = new Child(11)

四、原型式继承
与原型链类似

  • 优点:简单
  • 缺点:多个实例共享引用类型的属性
const objectCreate = (o) => {
    // 就是Object.create 静态方法的实现
    // 实际上只是对 o 进行了浅拷贝
    function F() {}
    F.prototype = o
    return new F()
}

五、寄生式继承
与借用构造函数类似

  • 缺点:每次创建实例都会重新创建一遍方法,函数没有复用
    function create(o) {
        var f = Object.create(o)
        f.foo = function() {}
        return f
    }

六、寄生组合式继承
主要是改进了组合继承需要调用两次构造函数的缺点

function object(o) {
    function F() {}
    F.prototype = o
    return new F()
}

// 这里代替了用来 组合式继承 第一次调用构造函数
// 将父类的原型进行一次浅拷贝
// 并将这个浅拷贝的对像作为原型链接到子类
function inheritPrototype(subType, superType) {
    var prototype = object(superType.prototype)
    prototype.constructor = subType
    subType.prototype = prototype
}

function SuperType(name) {
    this.name = name
    this.colors = ['red', 'blue']
}
SuperType.prototype.sayName = function() {
    alert(this.name)
}

function SubType(name, age) {
    SuperType.call(this, name)
    this.age = age
}
SubType.prototype.sayAge = function() {
    alert(this.age)
}

inheritPrototype(SubType, SuperType)

相关文章

  • js 继承

    4种继承方式 原型式继承给原型对象添加属性原型替换子类的原型对象替换为父类的原型对象 原型链继承 借用构造函数继承...

  • JavaScript笔记3

    RegExp、JSON、创建对象、构造函数、原型对象、原型链、原型继承、class、class继承 RegExp ...

  • 原型链

    原型继承 构造函数继承? 函数对象 原型prototype

  • JS原型和原型链

    一、原型 也是一个对象(被继承的对象被称作原型)。用来给实例共享属性和方法(实例对象可以继承原型对象的属性) 继承...

  • JavaScript 面向对象编程

    对象的创建 继承 原型式继承: 原型式继承,其本质是执行对给定对象的浅复制。原型链:{currentObject}...

  • 深入理解js中实现继承的原理和方法

    原型对象继承 ==原理:原型对象的属性可以经由对象实例访问== 下面的例子,所含【对象继承】和【构造函数继承】,用...

  • 再谈javascriptjs原型与原型链及继承相关问题

    什么是原型语言 只有对象,没有类;对象继承对象,而不是类继承类。 “原型对象”是核心概念。原型对象是新对象的模板,...

  • es5的部分继承以及es6的class

    一、JavaScript常用的原型继承方式 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承...

  • JS中的面向对象

    对象 创建对象的方式 使用工厂方式创建对象 使用构造函数创建对象 原型 容易出现的问题 继承 原型继承(基于原型链...

  • JavaScript之面向对象编程

    五、面向对象编程 目录:面向对象原型继承、面向对象class继承(ES6引入的) 1.面向对象原型继承 类:模板 ...

网友评论

      本文标题:对象/原型/继承

      本文链接:https://www.haomeiwen.com/subject/lpoeoqtx.html