首页 / JAVASCRIPT / 深入 JavaScript 中的对象以及继承原理

深入 JavaScript 中的对象以及继承原理

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了深入 JavaScript 中的对象以及继承原理，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9666字，纯文字阅读大概需要14分钟。

内容图文

ES6引入了一个很甜的语法糖就是 class, class 可以帮助开发者回归到 Java 时代的面向对象编程而不是 ES5 中被诟病的面向原型编程. 我也在工作的业务代码中大量的使用 class, 很少去触及 prototype 了.

两面性:

class 语法糖的本质还是prototype, 所以应该回归到写 prototype 上.
既然有 class 的写法了, 而且继承上也相比原型好写, 好理解许多, 所以应该向前看, 摒弃掉以前的 prototype 写法.

睿智而理性的读者, 你的理解是其中之一还是二者兼备? 我的看法是: 语法糖存在即合理, 语法糖不仅仅是更高层级的封装, 它可以避免写出没有语法糖时候的 bug, 但是语法糖不是语言本身的特性, 所以也一定要理解背后的成因, 加上原型是 JavaScript 里面特别特别重要的知识点, 不能不去深究. 你可以不用, 但不能不懂.

好了, 来看看 ES5 的面向对象编程

什么是对象

ECMA的官方解释: 无序属性的集合, 属性可包括基本值, 函数, 对象

注意无序二字, 可理解为包含一定属性或方法的键值对. 是的, 本质上, 对象就是包含键值对映射的集合, 键是属性的名字, 值就是属性

属性的类型

数据属性
- configurable
  - 表示是否可以被配置(除了 enumerable 和 writable 之外), 包含但不限于属性属性转化为访问器属性, 主要是用于 delete 的限制
- enumerable
  - 是否可以被 for in 或 Object.keys 到
- value
  - 属性具体的值, 默认 undefined
- writable
  - 可修改 value
访问器属性
- configurable
  - 表示是否可以被配置(除了 enumerable 和 writable 之外), 包含但不限于属性属性转化为访问器属性, 主要是用于 delete 的限制
- enumerable
  - 是否可以被 for in 或 Object.keys 到
- get
  - 获取属性的值, 默认 undefined
- set
  - 设置属性的值, 默认 undefined

注意, 第二个访问器属性就是被著名的 React 和 Vue 实现数据响应的原理之一. 再注意, 以上所有的 bool 属性在没有进行配置的时候都默认为 false.

如何实现这两者的转化呢

在 configurable 为 true 的情况下, 凡是包含 value 或 writable 的会默认为数据属性, 会将原有的 get 和 set 属性删除, 反之如果设置了 get 或 set, 那么就会认为为访问器属性, 将 value 和 writable 删除

const  o = {}
Object.defineProperty(o, 'name', {
    configurable: true,
    enumerable: false, // 可不写, 默认为 false
    value: 'lorry',
    writable: false // 可不写, 默认为 false
})
console.log(o)//{name: "lorry"}
o.name = 'jiang'// 不会改变, 因为 writable 为 false
console.log(o)//{name: "lorry"}
Object.keys(o)// []
// 转化为访问器属性
o['_name'] = 'lorry'; // 设置私有属性
Object.defineProperty(o, 'name', {
    get: function(){return this._name},
    set: function(newName){this._name = newName},
    configurable: false,
    enumerable: true
})
console.log(o); // {_name: "lorry"}
o.name = 'setted jiang'
console.log(o.name); // setted jiang
Object.keys(o); // ["_name", "name"]

其他的方式

除了Object.defineProperty之外, 还有其他的跟对象属性相关的原生方法

Object.defineProperties(o, {attr1:{}, attr2:{}}), 批量设置一个对象多个属性
Object.getOwnPropertyDescriptor(o, attrName), 获取对象某个属性的配置
Object.getOwnPropertyDescriptors(o), 获取对象所有属性的配置

对象的创建

工厂模式

function createObject(name) {
    var o = new Object();
    o.name = name;
    o.sayName = function() {console.log(this.name)};
    return o;
}

const p1 = createObject('lorry')

优点: 简单直观缺点: 无法进行对象识别, 没有 instanceof 可以去追溯.

构造函数模式

function Person(name) {
    this.name = name;
    this.sayName = function() {console.log(this.name)};
}
const p1 = new Person('lorry')

注意, 凡是构造函数都应该首字母大写 优点:

不显式创建对象(实质还是有创建新对象)
使用 this 的上下文对象
不用 return(默认隐式创建的新对象)
能够使用 p1 instanceof Person进行对象识别

缺点:

每个实例都会生成新的属性和方法, 会造成内存的浪费(在当今性能过剩的年代, 这个实质上不算什么问题, 只是显得代码不是很规范和专业)

原型模式

function Person() {};
Person.prototype.name = 'Lorry';
Person.prototype.sayName = function() {
    console.log(this.name);
}
const p1 = new Person();
const p2 = new Person();
p1.sayName(); // lorry;
console.log(p1.sayName === p2.sayName) // true

可以看到两个实例p1 和 p2 共享同一个 name 属性和 sayName 的方法, 会节省内存.

注意, 在原型上的方法和属性是不会被 hasOwnProperty()检测出来的(Object.keys()同样如此), 但是在in中是有的.比如

p1.hasOwnProperty('name'); // false
Object.keys(p1); // []
'name' in p1; // true

一种更简单的定义方法

function Person(){};
Person.prototype = {
    name: 'lorry',
    sayName: function(){
        console.log(this.name)
    },
    //ES6
    sayName2() {
        console.log(this.name)
    }
}

这种方式完全重写了 prototype, 包括其原有的 constructor 属性(指向了字面量对象即 Object)

解决办法就是手动指定一下

Person.prototype = {
    constructor: Person
}

原型对象的问题:

实例无法给构造函数传值
共享既是优点也是缺点, 有些属性希望各个实例各自保持自己的, 就无法通过此方法实现

组合模式

看到了吗? 构造函数模式和原型模式实质上是两个极端, 一个是每个实例都是各自为营, 一个是每个实例都步调一致, 所以, 两者的结合就是更好的解决方案.也是现在最常用的方案.

function Person(name) {
    // 每个实例各有的
    this.name = name
}
// 每个实例共享的
Person.prototype.sayName = function() {
    console.log(this.name)
}

还有一种动态原型的变体

function Person(name) {
    this.name = name;
    // 只会在构造函数初始化时创建一次
    if (typeof this.sayName !== 'function') {
        Person.prototype.sayName = function() {
            console.log(this.name)
        }
    }
}

寄生构造函数以及稳妥寄生构造函数模式

首先什么叫寄生? 之前我只知道这个模式叫寄生, 但是不知道为什么叫寄生. 现在我的理解是: 寄生是一种相互独立的状态, 就像寄居蟹, 它可以爬到任何一个的壳中生活.看下面的例子

function Person(name) {
    const o = new Object();
    o.name = name;
    o.sayName = function() {
        console.log(this.name)
    }
    return o;
}
const p1 = new Person('lorry')
const p2 = Person('lorry')
// p1和p2所拥有的属性和方法是一样的.

上述代码中, 壳就是 function Person(name){}这部分, 寄居蟹就是剩余的部分, 调用 new Person()返回的对象跟 Person 没有任何原型上的关系(p1 instanceof Person = false).

这样有什么好处呢? 私有变量

function Person(name) {
    const o = new Object()
    o.sayName = function() {
        console.log(name)
    }
    return o;
}
const p1 = new Person('lorry')

p1中就保存了一个稳定对象, 除了调用 sayName 之外没有任何办法可以获取到构造函数中的数据成员.

对象的和继承

OO 的语言通常有两种继承

接口的继承, 只继承方法签名
实现的继承, 继承实际的方法

ECMA 只支持实现的继承, 也就是具体的方法, 当然一些JavaScript 的超集, 比如 typescript 可以支持接口的继承.

interface A {
    name: string
}

interface B extends A {
    age: number
}

var b: B = {
    name: 'lorry',
    age: 26
}

原型链继承

原理就是将 SubType 的[[ prototype ]] 属性指向了 SuperType 的prototype, 本质就是重写了 prototype.

function SuperType() {
    this.property = false;
}
SuperType.prototype.getSuperValue = function() {
    return this.property;
}
function SubType() {
    this.subProperty = true;
}
// 实现了原型继承, 拥有 SuperType 的所有实例属性和方法
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
    return this.subProperty;
}
const subIns = new SubType();
console.log(subIns.getSuperValue());

描述继承关系: SubType 继承 SuperType, SuperType 继承默认的原型 Object. 所以

console.log(subIns instanceof SubType) // true
console.log(subIns instanceof SuperType) // true
console.log(subIns instanceof Object) // true
console.log(Object.prototype.isPrototypeOf(subIns))//true
console.log(SuperType.prototype.isPrototypeOf(subIns))//true
console.log(SubType.prototype.isPrototypeOf(subIns))//true

问题:

引用类型(比如数组)的原型属性会被所有实例共享.但实质上之所以在 SuperType 的构造函数中定义属性就是不希望所有实例共享.
创建子类的实例时(上例中的 subIns ), 无法向父类构造函数中传参.因为继承不发生在构造函数中

借用构造函数

为了解决上述的第二个问题, 有了这个构造函数继承方式

function SuperType(name) {
    this.name = name
}

function SubType(name) {
    SuperType.call(this, name);
}
const subIns = new SubType('lorry')
subIns.name;// lorry

就跟构造函数的问题一样, 无法实现函数的复用.

组合继承

跟组合创建对象模式一样, 将借用构造函数和原型链继承的方式组合起来就形成了组合继承的方式.

function SuperType(name) {
    this.name = name
}
SuperType.prototype.sayName = function () {
    console.log(this.name)
}

function SubType(name) {
    // 继承属性
    SuperType.call(this, name);
}
// 继承方法
SubType.prototype = new SuperType()
const subIns = new SubType('lorry')
subIns.sayName() // lorry

注意: 其实在继承方法的时候也继承了实例的属性, 但是在查找原型链的时候, 因为实例本身就有其属性了, 不会再向上到超类中查找, 所以相当于只继承了方法. 这两者的结合就形成了最常用的继承方式.

原型式继承

这种方式是临时创建一个对象, 然后使该对象的原型指向超类, 最后返回该临时对象的实例. 所以该实例的 [[ prototype ]] 便指向了超类, 即类似对超类进行了一次浅复制.

function object(o) {
    function F(){};
    F.prototype = o;
    return new F();
}
const Person = {
    name: 'lorry',
    friends: ['A', 'B']
}
const anotherPerson = object(Person);

anotherPerson.name = 'Lourance'
anotherPerson.friends.push('C')
console.log(Person.name, Person.friends) // 'lorry', ['A', 'B', 'C']

上述的 object 函数就是 ES5 中的 Object.create()函数不传第二个参数的情况, 即Object.create(o)等价于object(o)

寄生式继承

还记得寄生吗? 就是那只寄居蟹.

function createAnother(origin) {
    const clone = object(origin)
    clone.sayName = function() {
        console.log(this.name)
    }
    return clone
}
const anotherPerson = createAnother(Person)
anotherPerson.sayName() // lorry

这种方式有两个弊端:

与构造函数类似, 这种方式无法复用函数.
寄生的通病不知道其继承的谁. instanceof 会失效.

寄生组合式继承

之前说过最常用的继承模式为组合式继承, 但是组合式继承有一个问题就是会重复调用超类两次, 为了解决这个问题就可以使用寄生组合式继承.

// 寄生模式
function inheritPrototype(child, parent) {
    const prototype = Object(parent.prototype);
    // 恢复 instanceof 原型链的追溯
    prototype.constructor = child;
    child.prototype = prototype;
}
function SuperType(name) {
    this.name = name;
    this.friends = ['A', 'B']
}
SuperType.prototype.sayName = function() {
    console.log(this.name)
}
function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
inheritPrototype(SubType, SuperType);
const subIns1 = new SubType('lorry', 26);
const subIns2 = new SubType('lorry', 26);
subIns1.sayName(); // lorry
subIns1.friends.push('C');
console.log(subIns1.friends); // ['A', 'B', 'C']
console.log(subIns2.friends); // ['A', 'B']

上述就是最合理的继承方式, 集寄生式继承和组合继承的优点于一身. YUI 这个库就采用了上述的继承方式.

由此, 整个关于对象的内容就说完了.总结一下创建对象的方式:

工厂模式
构造函数模式
组合模式

继承的方式:

原型模式
寄生式模式
寄生组合式模式

内容总结

以上是互联网集市为您收集整理的深入 JavaScript 中的对象以及继承原理全部内容，希望文章能够帮你解决深入 JavaScript 中的对象以及继承原理所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/806359.html

来源：【匿名】

【上一篇】javaScript基础及初始面向对象【下一篇】javascript 怎么调用php方法

更多 ►

【深入 JavaScript 中的对象以及继承原理】教程文章相关的互联网学习教程文章

javascript继承【代码】【图】

JavsScript中对象继承关系变得无关紧要，对于一个对象来说重要的是它能做什么，而不是它从哪里来。JavaScript提供了一套更为丰富的代码重用模式。它可以模拟那些基于类的模式，同时它也可以支持其他更具表现力的模式。JavaScript是一门基于原型的语言，这意味着对象直接从其他对象继承。一、伪类1、原理javascript原型机制：不直接让对象从其他对象继承，反而插入了一个多余的间接层：通过构造器函数产生对象。当一个函数对象被创建...

JavaScript继承的实现【代码】【图】

JavaScript继承有构造函数继承、原型继承、复制继承、构造函数/原型组合继承等方法，这些继承方法各有特点。眼下最经常使用的就是构造函数/原型组合继承。/*** 实现继承* @param subType {Function} 子类构造函数* @param superType {Function} 父类构造函数*/functioninherit(subType, superType){functionF(){}F.prototype = superType.prototype;var p = new F();p.constructor = subType;subType.prototype = p; }/***...

JavaScript如何实现继承【代码】【图】

// 原型方式的‘继承‘ function Person(name) { //定义一个Person的构造函数 this.name = name; //添加属性 } Person.prototype.showName=function () { //添加方法 return this.name; }; function Worker(name,job) { Person.apply(this,arguments); //属性的‘继承‘ this.job=job; } Worker.prototype=new Person(); //方法的‘继承‘ Worker.prototype.showJob=function () { return this.job; }; var p1=new Person(‘abc‘)...

JavaScript中的继承之借用构造函数【代码】

借用构造函数是为了解决引用值类型被所有实例共享的问题。基本思想是：在子类型构造函数内部通过apply()或call()方法调用超类型的构造函数，也可以在将来新创建的对象上执行构造函数。先看一个例子：function superType(){this.colors = [‘red‘,‘blue‘,‘green‘]; }function subType(){//继承了superTypesuperType.call(this); }var instance1 = new subType(); instance1.colors.push(‘black‘); alert(instance1....

javascript实现继承的一种方式【代码】

function extend(Child, Parent) {var F = function(){};F.prototype = Parent.prototype;Child.prototype = new F();Child.prototype.constructor = Child;Child.uber = Parent.prototype;} 使用的时候，方法如下extend(Cat,Animal);var cat1 = new Cat("大毛","黄色");alert(cat1.species); // 动物这个extend函数，就是YUI库如何实现继承的方法。原文：http://www.cnblogs.com/hubing/p/4528496.html

一文看懂JS继承【图】

继承是OOP中大家最喜欢谈论的内容之一，一般来说，继承都两种方式：接口继承和实现继承而JavaScript中没有接口继承需要的方法，因此只能依靠实现继承。在讲继承的实现之前，我们首先来回顾一下什么是继承？继承的作用是什么？它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。通过继承创建的新类称为“子类”或“派生类”。被继承的类称为“基类”、“父类”或“超类”。在清楚继承的作用之后，下...

javascript中创建对象和实现继承

# oo ##创建对象 1. 原型、构造函数、实例之间的关系 * 原型的construct->构造函数；调用isPrototypeOf(obj)方法可以判定和实例的关系； * 构造函数的prototype->原型； * 实例的__proto__ ->原型（仅在chrome,safari,Firefox中存在，而共有的是[[prototype]]）；用getPrototypeOf()方法可以返回[[prototype]]的值； * 构造函数后构造函数的‘子类’new产生一个实例，可以用instanceOf 操作符来检测构造函数是否出现在原型链上...

javascript 继承机制设计思想

作者：阮一峰原文链接：http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html我一直很难理解Javascript语言的继承机制。它没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototype chain）模式，来实现继承。我花了很多时间，学习这个部分，还做了很多笔记。但是都属于强行记忆，无法从根本上理解。直到昨天，我读到法国...

javascript——继承

内容： 1.继承的概念、继承分为那几种继承及各种继承的区别 2.js中有那几种继承方式及各种继承的优缺点 3.总结原文：http://www.cnblogs.com/xiaowuzi/p/3715505.html

javascript 通过原型继承创建一个新对象

function inherit(p) { 　　if(p == null) throw TypeError(); //p 是一个对象, 但不能是null 　　if(Object.create) 　　　　　　　　　　　　　　　　　　//如果Object.create()存在　　return Object.create(p);　　　　　　　　　　　　　　　　　　　　 //直接使用它　　　　var t = typeof p;　　　　　　　　　　　　　　　　　　　　　　　　//否则进...

Javascript中的原型继承详解【代码】【图】

js中的继承，是面向对象的知识，因为js没有类的概念，所以继承是通过对象实现的，谈到继承，就必须说到prototype，就不得不先说下new的过程。一个小小的列子：<scripttype="text/javascript">var Person = function() { };var p = new Person();</script>我们来看看这个new究竟做了什么？我们可以把new的过程拆分成以下三步：<1> var p={}; 也就是说，初始化一个对象p。<2> p.proto=Person.prototype;<3> Person.call(p);也就是说...

JavaScript继承详解（三）【代码】

在第一章中，我们使用构造函数和原型的方式在JavaScript的世界中实现了类和继承，但是存在很多问题。这一章我们将会逐一分析这些问题，并给出解决方案。注：本章中的jClass的实现参考了Simple JavaScript Inheritance的做法。首先让我们来回顾一下第一章中介绍的例子： function Person(name) {this.name = name;}Person.prototype = { getName: function() { return this.name; }} function Employee(name, employeeID) {this....

js的封装、继承与多态【代码】

<!DOCTYPE html><html><head><meta charset="utf-8"><title>test</title></head><body><script>window.onload =function() {// 封装var Book =function(id, name, price) {// 私有变量(在函数内部定义，函数外部访问不到，实例化之后实例化的对象访问不到)var num =1var id = idfunction privateFunction() {console.log(‘this is private‘)}// protected(可以访问到函数内部的私有属性和私有方法，在实例化之后就可以对实例化的...

JajavaScript——原型继承四步曲

javascript中实现继承的几种方式【代码】

javascript中实现继承的几种方式1、借用构造函数实现继承function Parent1(){this.name = "parent1" } function Child1(){Parent1.call(this);this.type = "child1"; }缺点：Child1无法继承Parent1的原型对象，并没有真正的实现继承（部分继承）2、借用原型链实现继承function Parent2(){this.name = "parent2";this.play = [1,2,3]; } function Child2(){this.type = "child2"; } Child2.prototype = new Parent2();缺点：原型对象...

首页 / JAVASCRIPT / 深入 JavaScript 中的对象以及继承原理

深入 JavaScript 中的对象以及继承原理

内容导读

内容图文

什么是对象

ECMA的官方解释: 无序属性的集合, 属性可包括基本值, 函数, 对象

属性的类型

如何实现这两者的转化呢

其他的方式

对象的创建

工厂模式

构造函数模式

原型模式

组合模式

寄生构造函数以及稳妥寄生构造函数模式

对象的和继承

原型链继承

借用构造函数

组合继承

原型式继承

寄生式继承

寄生组合式继承

内容总结

内容备注

内容手机端

【深入 JavaScript 中的对象以及继承原理】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程