JavaScript之Object原型方法

时间：2022-08-24 22:25:46

Object

在JS 中，对象都是有原型的，甚至原型链。不过最终都是指向一个最初的原型，即 Object 对象的原型。那这个原型里都有啥呢？下面一起来看下，首先在浏览器控制台输入 {}，我们知道这是创建一个对象。

JavaScript之Object原型方法

从上面的图片我们发现对象的 原型属性 __proto__ 下面有 13 个属性或者函数（这里我用的是Chrome，不同浏览器可能不一样）。

原型函数

下面一一看下：

函数 作用 说明
obj.__defineGetter__(prop, func) 将一个函数绑定在当前对象的指定属性上，当那个属性被读取时，你所绑定的函数就会被调用 Web标准已废弃
obj.__defineSetter__(sprop, func) 将一个函数绑定在当前对象的指定属性上，当那个属性被赋值时，你所绑定的函数就会被调用 Web标准已废弃
obj.__lookupGetter__(sprop) 返回当前对象上指定属性的属性读取访问器函数（getter），即上面设的函数 Web标准已废弃
obj.__lookupSetter__(sprop) 返回一个对象的某个属性上绑定了 setter （设置器）的钩子函数的引用 Web标准已废弃
obj.toString() 返回一个表示该对象的字符串
obj.toLocaleString() 返回调用 toString() 方法的结果
obj.valueOf() 返回值为该对象的原始值
obj.constructor 即 Object的构造函数
obj.propertyIsEnumerable(prop) 判断属性是否是当前对象可枚举的自身属性
prototypeObj.isPrototypeOf(object) 用于测试一个对象是否存在于另一个对象的原型链上
obj.hasOwnProperty(prop) 判断对象是否具有指定的属性作为自身（不继承）属性

例子

下面通过一些代码来说明各个函数的作用。

var obj = {};

var readCallback = function() {
console.log('name was read');
}

obj.__defineGetter__('name', readCallback);

console.log(obj.name);// 读取 name 属性后，会调用上面的函数。

var reassignCallback = function(val) {// 新值会作为参数传进来
console.log('name was assigned again with : ' + val);
};

obj.__defineSetter__('name', reassignCallback);

obj.name = 'name';// 修改 name 属性后，会调用上面的函数。

var lookupGetFun = obj.__lookupGetter__('name');// 返回上面我们设置的 Getter函数
console.log(lookupGetFun === readCallback)// 输出 true

var lookupSetFun = obj.__lookupSetter__('name');// 返回上面我们设置的 Setter函数
console.log(lookupSetFun === reassignCallback)// 输出 true

obj.__proto__.constructor === Object // 因为 obj 的原型式 Object ，因此输出 true

var hasNameProp = obj.hasOwnProperty('name') // 输出 true

obj.isPrototypeOf(Object);

var secondObj = {};
secondObj.__proto__.isPrototypeOf(obj) 
// 因为 secondObj 和 obj 是共用一个原型，因此输出 true

var isNameEnumerable = obj.propertyIsEnumerable('name');
// 属性存在 且 可枚举时，才返回 true

defineProperty

上面一些函数的返回值其实与属性的三个特性有关：可写，可配置，可枚举。

可写，只有设为 true 时，该属性才能被赋值运算符赋值， 默认 true

可配置，只有设为true 时，描述符才能够被改变，也能够被删除。默认 true

可枚举，只有设为true 时，属性才能够出现在对象的枚举属性中。默认 true

好了先看下语法：

// 参数 ： 要设的对象，要设的属性，描述符（是个对象）
Object.defineProperty(obj, prop, descriptor)
描述符就是对上面说的三个特性的配置。看个例子 

Object.defineProperty(obj, 'secondName', {
    // value: "hust",
    // writable: true,
    // 数据描述符和存取描述符不能混合使用, value、writable 跟 get、set 不能同时使用。
    configurable: true,
    enumerable: true,
    get: readCallback,
    set: reassignCallback
});
注意，这里 value、writable 和 get、set一定不能同时出现，否则报以下错误。

Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute

另外 Object 本身还有一些很实用的函数，有兴趣的可以自己阅读下Mozilla 官方文档。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object


标签：

相关文章