Some easily confused methods in js-JS Tutorial-php.cn

Some easily confused methods in js

高洛峰

Release： 2016-10-17 09:50:49

Original

1260 people have browsed it

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}, &#39;x&#39;);
//{value:1, writable:true, enumerable:true, configurable:true}alert(o);    //  [object Object]

Copy after login

This method can only obtain its own property descriptor, and cannot obtain the characteristics of inherited properties:

var o = Object.getOwnPropertyDescriptor({}, &#39;toString&#39;);<br>
alert(o);     //undefined

Copy after login

②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, &#39;x&#39;, {
                value : 1,
                writable : true,
                enumerable : false,
                configurable : true
            });
            alert(o.x);   //  1
            
            Object.defineProperty(o, &#39;x&#39;, {writable : false});
            o.x = 2;   //不可行，不会报错，但不会修改， o.x = 1；
            
            Object.defineProperty(o, &#39;x&#39;, {value : 2});
            alert(o.x);   //  2

Copy after login

③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;
                        }
                    }
                }
            });

Copy after login

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

Copy after login

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 = &#39;Tom&#39;;
            
            var friend = new Person();
            alert(Object.getPrototypeOf(friend) == Person.prototype);  // true
            alert(Object.getPrototypeOf(friend).name);  // Tom

Copy after login

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 = &#39;Tom&#39;;
            Person.prototype.sayName = function(){
                alert(this.name);
            };
            
            var frient1 = new Person();
            frient1.name = &#39;Jery&#39;;
            var frient2 = new Person();
            
            alert(frient1.hasOwnProperty(&#39;name&#39;));
            alert(frient2.hasOwnProperty(&#39;name&#39;));

Copy after login

Using hasOwnProperty() you can easily know whether you are accessing an instance property or a prototype property.