美文网首页让前端飞Web前端之路Web 前端开发
前端基础重点回顾3: 原型链、面向对象、继承

前端基础重点回顾3: 原型链、面向对象、继承

作者: coolheadedY | 来源:发表于2018-01-26 23:20 被阅读54次

创建对象的几种方法

  • 字面量创建对象
var o1 = { name: 'o1' }
  • 使用Object构造函数创建对象
var o2 = new Object({ name: 'o2' })
  • 使用显式构造函数创建
var Obj = function (name) { this.name = name }
var o3 = new Obj('o3')
  • 是用Object.create 创建一个指定原型的对象
var proto = { name: 'o4' }
var o4 = Object.create(proto)

原型链

原型链描述

1.从一个实例对象向上找构造这个实例相关联的对象,
2.再从从这个相关联的对象继续向上找创建这个对象相关联的对象,
3.以此类推一直到Object.prototype (null)终止。

原型链通过什么连接和寻找

通过构造函数prototype 和 实例对象的proto 进行寻找

原型对象prototype 有什么特点

构造函数的prototype 由此构造函数创建的多个实例共同使用的对象

instanceof的原理

  • 判断实例对象:proto 和构造函数:prototype 两者的引用是否是同一个原型的引用地址(比如Object.prototype )
  • 在原型链上的构造函数都会返回true

面向对象

类与实例

var P = function (name) {
  this.name = name
}

class P {
  constructor (name) {
    this.name = name
  }
}

const p = new P('name')

new 操作符使用

// 使用new 操作符直接创建实例
var p1 = new Person('laoyang', '22', 'coding')

// 不使用new 操作符
var p2 = new Object() // p2 创建成为一个对象 这时p2的原型是Object
Person.call(p2, 'xiaoyang', '2', 'test') // Person构造函数在 p2 对象的环境内执行 这时p2已经是一个具有Person属性的实例了,但原型是Object
p2.__proto__ = Object.create(Person.prototype) // 最后创建一个原型为Person.prototype 的p2.__proto__,让p2的原型为Person.prototype

new 操作符做了什么

  • 创建一个空对象,它继承自构造函数Person.prototype
  • 构造函数Person被执行,执行时相应的参数会被传入,同时上下文this会被指定为这个新实例
  • 如果构造函数Person返回了一个对象,那么这个对象会取代整个new 出来的结果,如果构造函数没有返回对象,那么new 出来的结果为创建的对象
var new = function(func) {
    var o = Object.create(func.prototype)
    var k = function.call(o)
    if (typeof k === 'object') {
        return k
    } else {
        return o
    }
}
var obj = new(P)
obj instanceof P // true
obj.__proto__.constructor === P // true

继承有几种方式

  • 借助构造函数实现继承
function Parent () {
  this.name = 'parent'
}
Parent.prototype.fn = function () {}
function Child () {
  Parent.call(this)
  this.type = 'child'
}
缺点: Parent 的原型对象prototype 无法继承
  • 借助原型链实现继承
function Parent () {
  this.name = 'parent'
  this.arr = [1,2,3]
}
function Child () {
  this.type = 'child'
}
Child.prototype = new Parent()
优点: 解决了Parent 原型对象的继承
缺点: 由Child 创建的多个实例对象共享父类的引用类型
var c1 = new Child()
var c2 = new Child()
c1.arr.push(4)
c2.arr // [1, 2, 3, 4]
  • 前两种的组合方式
function Parent () {
  this.name = 'parent'
  this.arr = [1, 2, 3, 4]
}
function Child () {
  Parent.call(this)
  this.type = 'child'
}
Child.prototype = new Parent()
优点: 不仅实现了父类prototype 的继承,也通过Parent.call(this) 创建了各实例独自的arr 复杂类型
缺点: 不够优雅,可以优化
  • 组合方式优化1
function Parent () {
  this.name = 'parent'
  this.arr = [1, 2, 3]
}
function Child () {
  Parent.call(this)
  this.type = 'child'
}
Child.prototype = Parent.prototype
优点: Child不仅继承了Parent 的prototype,而且实现优雅
缺点:  Child 创建的实例constructor 指向是Parent, 而且修改了Parent.prototype 会同时改变Child.prototype 和由Child 创建实例的__proto__
  • 组合方式优化2
function Parent () {
  this.name = 'parent'
  this.arr = [1, 2, 3]
}
function Child () {
  Parent.call(this)
  this.type = 'child'
}
Child.prototype = Object.create(Parent.prototype) // 创建一个纯净的对象
Child.prototype.constructor = Child // 把Child 原型的constructor 指向自己
优点: 不仅完成了继承,同时把Child.prototype.constructor 指向自己,使得每个实例的__proto__.constructor 都指向Child构造函数,更规范。使用Object.create(proto) 方法创建了一个原型对象为Parent.prototype 但是又和Parent.prototype 彻底分离的纯净对象,与Child.prototype 两者互不影响。

相关文章

  • 前端基础重点回顾3: 原型链、面向对象、继承

    创建对象的几种方法 字面量创建对象 使用Object构造函数创建对象 使用显式构造函数创建 是用Object.cr...

  • lesson 5 面向对象及原型链 2021-04-29

    课程标题 面向对象及原型链 课程目标 面向对象思想 原型及原型链 继承 知识点 面向对象思想 原型链的指向 new...

  • JS汇总---面向对象&数组

    面向对象 js原型链的继承 静态属性怎么继承 js原型链以及特点 面向对象有哪几个特点 封装,继承,多态 对象的继...

  • 前端面试准备--5.原型链

    *原型链(面向对象的一个基础) 1.创建对象有几种方法 2.原型、构造函数、对象实例、原型链 3.instance...

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

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

  • Javascript继承的原理

    JavaScript的继承是通过原型链继承,与传统面向对象的继承方式不同。 prototype与原型 我们从头开始...

  • 面向对象(三)

    内容承接 面向对象(二) 继承 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本...

  • 2018-06-27

    JavaScript(面向对象+原型理解+继承+作用域链和闭包+this使用总结) 一、面向对象 1、什么是面向对...

  • JavaScript之面向对象编程

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

  • 面向对象(八)继承___ 03原型链继承

    title: 面向对象(八)继承___ 03原型链继承 # 文章页面上的显示名date: # 文章...

网友评论

    本文标题:前端基础重点回顾3: 原型链、面向对象、继承

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