美文网首页
JavaScript Object相关

JavaScript Object相关

作者: 咕嘟咕嘟li | 来源:发表于2019-02-11 16:52 被阅读6次

本文主要讲3个问题
1.Object.defineProperties(obj, props)
2.Object.create(obj, [propertiesObject])

  1. __proto__prototype理解
1. Object.defineProperties(obj, props)

功能: 方法直接在一个对象上定义一个或多个新的属性或修改现有属性,并返回该对象。
obj: 将要被添加属性或修改属性的对象
props: 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

// 例子如下:
var VNode = function VNode (
  tag,
  data,
  children,
  text,
  elm,
  context,
  componentOptions,
  asyncFactory
) {
  this.tag = tag;
  this.data = data;
  this.children = children;
  this.text = text;
  this.elm = elm;
  // ...(省略部分代码)
};

var prototypeAccessors = { child: { configurable: true } };

// DEPRECATED: alias for componentInstance for backwards compat.
/* istanbul ignore next */
prototypeAccessors.child.get = function () {
  return this.componentInstance
};

Object.defineProperties( VNode.prototype, prototypeAccessors );
2. Object.create(obj, [propertiesObject])

功能:创建一个新对象,使用现有的对象来提供新创建的对象的__proto__
obj: 一个对象,应该是新创建的对象的原型。
propertiesObject:可选。该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

  • Object.create(null)b创建了一个空对象,在该对象上没有继承 Object.prototype 原型链上的属性或者方法。

    空对象属性.png
  • 以字面量创建空对象:var o = {}; 相当于 var o = Object.create(Object.prototype);

    image.png
  • 使用Object.create()是将对象继承到__proto__属性上

const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};
const me = Object.create(person);
me.name = ‘Matthew’; // ‘name’ 是 ‘me’ 的属性,不存在于‘person’上
me.isHuman = true; // 继承的属性可以重写(覆盖)
对象打印后展开如下: image.png
// 例子如下
var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);

3. __proto__prototype理解

在JS里,万物皆对象。方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它们都具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。

  • __proto__是JavaScript里的原型
  • prototype是在 function 中特有的原型属性 。function 的原型属性指向一个Object,并且Object的constructor属性指向了这个构造函数本身。

·
·
·
以上就是阅读vue.js 源码的时候自己做的一个知识扩展了。

相关文章

网友评论

      本文标题:JavaScript Object相关

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