Rumah > hujung hadapan web > tutorial js > js中一些容易混淆的方法

js中一些容易混淆的方法

高洛峰
Lepaskan: 2016-10-17 09:50:49
asal
1305 orang telah melayarinya

JavaScript中有一些名字十分冗长的函数名称,导致使用时会混乱,特此整理一番,加深印象。

①Object.getOwnPropertyDescriptor     ——读取某个对象特定属性的属性描述符(value / writable / enumerable / configurable)

这个方法接受两个参数:(属性所在对象  , 要读取其描述符的属性名称),返回值是一个对象。

var o = Object.getOwnPropertyDescriptor({x : 1}, 'x');
//{value:1, writable:true, enumerable:true, configurable:true}alert(o);    //  [object Object]
Salin selepas log masuk

此方法只能取得自身的属性描述符,无法获得继承属性的特性:

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

②Object.defineProperty ——设置某个对象(单个)属性的特性或让新建属性具有某种特性

这个方法接受三个参数:(要修改的对象 , 要创建或修改的属性 、 属性描述符对象)。

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
Salin selepas log masuk

③Object.defineProperties —— 设置某个对象(多个)属性的特性或让新建属性具有某种特性

这个方法接受两个参数:(修改的对象 , 映射表--包含所有新建或者修改属性的名称和属性描述符)。

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;
                        }
                    }
                }
            });
Salin selepas log masuk

以上在一个空对象中定义了两个数据属性(_year和edition),还有一个访问器属性(year),这里额属性都是同一时间创立。

④isPrototypeOf ——确定对象与原型之间存在的关系

function Person(){}            
            var friend = new Person();
            alert(Person.prototype.isPrototypeOf(friend));  //true
Salin selepas log masuk

因为friend对象内部有一个指向Person.prototype的指针,所以返回true。

⑤Object.getPrototypeOf ——方便地取得一个对象的原型

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
Salin selepas log masuk

ES5中新增的方法,IE9+支持。

⑥hasOwnProperty ——检测一个属性是存在于实例中,还是存在于原型中

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;));
Salin selepas log masuk

使用hasOwnProperty()可以轻松知晓访问的是实例属性还是原型属性了。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan