Home >Web Front-end >JS Tutorial >Some easily confused methods in js
There are some very long function names in JavaScript, which can cause confusion when using them. I would like to sort them out to deepen my impression.
①Object.getOwnPropertyDescriptor - Read the property descriptor of a specific property of an object (value / writable / enumerable / configurable)
This method accepts two parameters: (the object where the property is located, the property name of its descriptor to be read ), the return value is an object.
var o = Object.getOwnPropertyDescriptor({x : 1}, 'x'); //{value:1, writable:true, enumerable:true, configurable:true}alert(o); // [object Object]
This method can only obtain its own property descriptor, and cannot obtain the characteristics of inherited properties:
var o = Object.getOwnPropertyDescriptor({}, 'toString');<br> alert(o); //undefined
②Object.defineProperty - Set the characteristics of an object (single) property or let the new property have certain characteristics
This The method accepts three parameters: (the object to be modified, the attribute to be created or modified, and the attribute descriptor object).
var o = {}; Object.defineProperty(o, 'x', { value : 1, writable : true, enumerable : false, configurable : true }); alert(o.x); // 1 Object.defineProperty(o, 'x', {writable : false}); o.x = 2; //不可行,不会报错,但不会修改, o.x = 1; Object.defineProperty(o, 'x', {value : 2}); alert(o.x); // 2
③Object.defineProperties - Set the characteristics of an object (multiple) properties or let the new properties have certain characteristics.
This method accepts two parameters: (modified object, mapping table-including all new or modified properties) property name and property descriptor).
Object.defineProperties({}, { _year : { value : 2016, writable : true, enumerable : true, configurable : true }, edition : { value : 1 }, year : { get : function(){ return this._year; }, set : function(newValue){ if(newValue > 2004){ this._year = newValue; this.edition += newValue - 2004; } } } });
The above defines two data attributes (_year and edition) and an accessor attribute (year) in an empty object, where the two attributes are all created at the same time.
④isPrototypeOf - Determine the relationship between the object and the prototype
function Person(){} var friend = new Person(); alert(Person.prototype.isPrototypeOf(friend)); //true
Because there is a pointer to Person.prototype inside the friend object, it returns true.
⑤Object.getPrototypeOf - Conveniently get the prototype of an object
function Person(){} Person.prototype.name = 'Tom'; var friend = new Person(); alert(Object.getPrototypeOf(friend) == Person.prototype); // true alert(Object.getPrototypeOf(friend).name); // Tom
A new method in ES5, supported by IE9+.
⑥hasOwnProperty - Detect whether a property exists in an instance or a prototype
function Person(){} Person.prototype.name = 'Tom'; Person.prototype.sayName = function(){ alert(this.name); }; var frient1 = new Person(); frient1.name = 'Jery'; var frient2 = new Person(); alert(frient1.hasOwnProperty('name')); alert(frient2.hasOwnProperty('name'));
Using hasOwnProperty() you can easily know whether you are accessing an instance property or a prototype property.