高级面向对象之 面向对象中常用的属性和方法

来源:互联网 发布:网络买鞋子怎么买 编辑:程序博客网 时间:2024/06/09 16:50
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>面向对象中的常用属性和方法</title></head><body><script>面向对象中的常用属性和方法:(1)hasOwnProperty() : 看是不是对象对象自身下面的属性(2)constructor : 查看对象的构造函数->:每个原型都会自动添加constructor属性->:for in 的时候有些属性是找不到的->:避免修改constructor属性(3)instanceof : 运算符->:查看对象与构造函数在原型链上是否有关系(4)toString():object对象上的方法demo1:var arr = [];arr.num = 10;Array.prototype.num2 = 20;alert(arr.hasOwnProperty('num'));  // truealert(arr.hasOwnProperty('num2')); // falsedemo1中 我们可以看出num是对象arr自身下面的属性,num2不是对象arr下面的属性,而是数组对象Array原型对象下面的属性demo2: constructor使用function Aaa(){}var a1 = new Aaa();alert(a1.constructor);   // Aaavar arr = [];alert(arr.constructor);  // Array但是这个constructor属性是哪里来的呢?原来 当我们定义一个对象后,系统会自动添加一行代码,以上面的Aaa对象为例,当我们定义了一个对象 Aaa之后(function Aaa(){}),系统会自动添加下面这行代码:Aaa.prototype.constructor=Aaa;就是说当我们定义了一个对象后,程序会自动给我们添加一个construcor属性,它是一个指针,指向该对象的构造函数,因此我们可以利用constructor属性来判断一些对象的类型,如:var arr = [];alert(arr.constructor == Array); // truedemo3:但是我们可以修改constructor,如function Aaa(){}Aaa.prototype.constructor = Array;var a1 = new Aaa();alert(a1.constructor == Aaa);  // false此时我们修改了系统为Aaa对象默认添加的constructor属性,此时Aaa的constructor属性不再指向Aaa,而是Array但是我们尽量不要修改constructor属性demo4: 我们有时候不经意就把constructor属性值该掉了function Aaa(){}Aaa.prototype.name='小明';Aaa.prototype.age = 20;var a1 = new Aaa();alert(a1.constructor); // Aaa但是当我们这样写时(简写):Aaa.prototype={name:'小明',age:20}alert(a1.constructor);  //Object这是为什么呢? 以为这种写法相当于我们把一个json对象{name:'小明',age:20}赋值给了Aaa的原型对象,json 对象有自己的constructor,此时我们就不经意间修改了Aaa的默认constructor属性,但是我们可以手动矫正,把constructor 属性的指向给修正过来:Aaa.prototype={constructor:Aaa,name:'小明',age:20}这样constructor属性又重新指向了Aaademo5:通过for in 获取对象属性(自己添加的属性可以知道,系统自带的既原型链上的属性是获取不到的):var Aaa =function(){}for(var attr in Aaa.prototype){alert(attr);  //弹不出任何值}当我们给Aaa对象添加一个属性时, Aaa.name='小明'; for in 便利就可以获取到,弹出name2.instanceof它其实不是面向对象的属性和方法,它其实是一个运算符,但是它的作用却是跟面向对象有关的demo1:function Aaa (){}var a1 = new Aaa();alert(a1 instanceof Aaa);    // truealert(a1 instanceof Array);  //falsealert(a1 instanceof Object); //true因此我们也可以利用instanceof做类型判断3.toString(): 返回对象的字符串表示demo1:function Aaa(){} var a1 = new Aaa(); alert(a1.toString == Object.prototype.toString); // true 结果为true 表明 toString()方法来自于 Object  Demo2: 与demo1比较 var arr =[];alert(arr.toString == Object.prototype.toString);  //falsevar arr2 = new String();alert(arr2.toString == Object.prototype.toString); // falsedemo1中对象是自定义对象,demo2中是系统对象,对比我们可以得出结论:toString()方法:--> 系统对象下面都是自带的,自己写的对象都是通过原型链找Object下面的demo3: 既然我们知道了toString方法的作用是返回对象的字符串表示,以及自定义对象的toString方法的出处我们就可以利用toString 方法达到下面的作用1:返回自定义的字符串样式var arr =[1,2,3];alert(arr.toString()); // 1,2,3 系统默认的返回形式我们可以自定义返回形式:Array.prototype.toString = function(){return this.join('+');}alert(arr.toString());  // 1+2+3 得到我们自定义的返回形式,以加号连接2:进制转换var num = 255;alert(num.toString(16)); // ff把整形的数值255 转换为16进制的字符表示, 因此我们可以利用这一特性实现颜色值的转换(RGB和16进制颜色值相互转换)3. 做类型判断        虽然我们可以利用 constructor 属性和instanceof 做类型判断,但是toString方法        也可以用来做类型判断     var arr=[];var arr2={};var arr3 = new Date();alert(Object.prototype.toString.call(arr));  // '[object Array]'alert(Object.prototype.toString.call(arr2)); // '[object Object]'alert(Object.prototype.toString.call(arr3)); // '[object Date]'通过结果可以看出,我们可以利用toString方法进行类型判断,如:alert(Object.prototype.toString.call(arr) == '[object Array]');  // true4.总结:既然 constructor,instanceof,toString()这三个都能用来判断类型,那么哪一种最呢?答案是 使用toString()方法,它才是最完美的判断,基本上这三个我们都能用,但是在某些特殊的情况下 constructor和instanceof 就会出现问题,例如在iframe 中(跨页面了),如下: window.onload = function(){ var oF = document.createElement('iframe'); document.body.appendChild(oF); var ifArray = window.frames[0].Array;  // 这个数组对象是iframe 下的数组对象  // 创建一个数组对象实例arr,它其实是iframe下数组对象的实例,那就跨页面了, // 虽然它是一个数组,但是它是在iframe下面的数组 var arr = new ifArray();  alert(arr.constructor == Array);   // false alert(arr instanceof Array);       // false alert(Object.prototype.toString.call(arr) == '[object Array]');  // true } // 综上所述,使用toString方法判断类型最好(当然大部分情况下,constructor和instanceof也能用)</script></body></html>

原创粉丝点击