【JS基本】Object 对象的原型观点详解

对象观点

在 javascript 中, 统统援用范例均为对象。 如
function Foo () {} 中,Foo自身就是一个对象的援用。

建立对象体式格局

  • 字面量体式格局
  • new 组织函数
  • 函数声明
  • Object.create

字面量对象

javascript言语级别疾速建立对象的实例

var obj = {foo: 'foo', bar: 'bar'}; // Object对象字面量
var obj2 = [obj, 'foo', 'bar']; // Array数组字面量
var obj3 = /^[a-zA-Z0-9]$/; // RegExp正则字面量
var obj4 = function(){}; // Function函数字面量

new 组织函数

经由历程内置对象的组织函数,或许自定义的函数。 运用 new 操作符,建立一个对象,而且实行组织函数要领。

var obj = new Object();
var obj2 = new Array(1000);
var obj3 = new RegExp('^[a-zA-Z0-9]$');
var obj4 = new Function('a', 'b', 'return a + b;');

函数声明

函数声明制造的对象. 函数属于特别的对象.

function Foo() {}
Foo instanceof Object;
Foo instanceof Function;

Object.create

传入一个对象作为返回对象的原型,建立一个新对象, 并将新对象的原型指向传入的对象中。

var foo = {
    'foo': 'foo',
    'bar': 'bar'
};
var o = Object.create(foo); // o.__proto__ = foo
console.log(o.foo); // o.__proto__.foo

运用Object.create(null) 可以返回一个字典范对象.

var o = Object.create(null);
o instanceof Object; // return false;
o.toString(); // Uncaught TypeError

对象原型

每个对象都有一个内置的 __proto__ 属性指向组织它的函数prototype属性. 而组织函数的prototype.constructor 则指向组织函数本生。一个对象的属性的寻觅历程由以下几个部份构成:

  1. 寻觅对象属性的数据描述符(writable, value)或存取描述符(getter, setter),假如查询到了,则返回 对应的值。假如查询不到,则进入第2步骤。
  2. 寻觅对象属性的值是不是有被显现定义 (可以经由历程 Object.getOwnPropertyNames)检测,假如对象属性定义了,则返回定义的值。 假如没有,则进入第3步骤。
  3. 寻觅对象的隐蔽原型__proto__对象的属性,划定规矩同1,2步骤。假如还未找到,则反复第3步骤, 直到__proto__ 为null 为止。

细致案例如下图所示:

《【JS基本】Object 对象的原型观点详解》

检测对象原型

测试一个对象在其原型链中是不是存在一个组织函数的 prototype 属性

  • instanceof
  • Object.prototype.isPrototypeOf

instanceof

运算符,言语级别的检测对象的原型链是不是包括组织函数的原型

function Foo () {}

Foo instanceof Function; // return true
Foo instanceof Object;   // return true

模仿instanceof查找对象的原型链的组织函数是不是包括传入的组织函数, __proto__ 在一些特定的浏览器有暴露给用户

function Bar () {}
function isInstanceof (obj, Constructor) {
 
  if (obj === null) {
    return false;
  }
  // 疏忽 string, number, boolean, null, undefined 范例滋扰
  if (!~['object', 'function'].indexOf(typeof obj)) {
    return false;
  }

  var prototype = obj.__proto__;
  while(prototype) {
    if (prototype.constructor === Constructor) {
        return true;
    }
    prototype = prototype.__proto__;
  }
  return false;
}
isInstanceof(Bar, Function);
isInstanceof(Bar, Object);

isPrototypeOf

组织函数的原型对象自带的函数属性, 用于检测目的对象的原型链中是不是存在组织函数的原型对象。

function Baz () {}
var baz = new Baz();
Baz.prototype.isPrototypeOf(baz);
Function.prototype.isPrototypeOf(baz);
Object.prototype.isPrototypeOf(baz);

猎取对象原型

  • Object.getPrototypeOf
  • __proto__
var o = {};
var prototype = Object.getPrototypeOf(o);
console.log(prototype === Object.prototype); // return true

// 部份浏览器有用
var o2 = {};
console.log(o2.__proto__ === Object.prototype); // return true

设置对象原型

  • Object.create
  • Object.setPrototypeOf

Object.create

返回一个对象,并设置它的原型

  function Foo () {}
  function Bar () {}
  Foo.prototype.foo = 'foo';
  Bar.prototype = Object.create(Foo.prototype); 
  Bar.prototype.constructor = Bar; // 修改原型链的constructor
  var o = new Bar();
  console.log(o.foo); // return foo;
  console.log(o instanceof Bar); // return true

Object.setPrototypeOf

直接设置对象的隐式原型__proto__

   function Foo () {}
   Foo.prototype.name = 'foo';
   var o = Object.create(null);
   Object.setPrototypeOf(o, Foo.prototype);
   console.log(o.name); // return foo

小结

对象具有很多磨练开发者的一些知识点。可以完整明白并整理出来是不容易的。后续我会针对对象的继续做个细致的引见。

谢谢

    原文作者:wayneli
    原文地址: https://segmentfault.com/a/1190000013017881
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞