Javascript 对象的创建和属性的判定

1. 创建对象的方法：

直接使用new 对Object对象进行操作，即对Object 对象进行实例化

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script>
 9         var obj = new Object();
10         obj.userName = "huanying2015";
11         obj.showName = function() {
12             return this.userName;
13         }
14         console.log(obj.userName);
15     </script>
16 </head>
17 <body>
18 </body>
19 </html>

运行结果：

2.直接创建一个对象：使用大括号包裹起来，在其中写属性和方法

1 <script>
2         var obj = {
3             userName: 'huanying2015',
4             showName: function() {
5                 return this.userName;
6             }
7         }
8         console.log(obj.showName());
9 </script>

运行结果：

3.使用工厂模式创建对象：设置一个函数，每次调用都会创建一个函数，开辟一个内存空间，每次调用都会开辟不同的空间，各个空间都不相同，互不干扰；在最后返回这个在构造函数中创建的对象

 1 <script>
 2         function creatObj(uName) {
 3             var o = new Object();
 4             o.userName = uName;
 5             o.showName = function() {
 6                 return this.userName;
 7             }
 8             return o;
 9         }
10         var OT1 = new creatObj('孙权');
11         var OT2 = new creatObj('刘备');
12         var OT3 = new creatObj('曹操');
13         console.log(OT1.showName()); //孙权
14         console.log(OT2.showName()); //刘备
15         console.log(OT3.showName()); //曹操
16         OT3.userName = '曹丕';
17         console.log(OT1.showName()); //孙权
18         console.log(OT2.showName()); //刘备
19         console.log(OT3.showName()); //曹丕
20     </script>

运行结果：

4. 使用构造函数的方式，创建对象：和工厂模式有点类似，也有差异，工厂模式是：每次调用，都对Object对象实例化一次，然后返回这个实例化的对象；构造函数模式是：调用一次，即是得到构造函数的一个实例

 1 <script>
 2         function createObj(uName) {
 3             this.userName = uName;
 4             this.showName = function() {
 5                 return this.userName;
 6             }
 7         }
 8         var OT1 = new createObj("huanying2015");
 9         var OT2 = new createObj("alhouha");
10         console.log(OT1.showName()); //huanying2015
11         console.log(OT2.showName()); //alhouha
12         console.log(OT1.showName === OT2.showName); //false  两个函数虽然都是showName ,但是他们出现在不同的对象，
13         // 而函数是地址，他们在不同的对象中，所以也就是在不同的地址中，所以结果为false
14 </script>

运行结果：

5. 使用函数的原型对象创建函数：其实是在构造函数的原型对象上增减方法，调用实例时，通过原型链都调用原型对象上的方法，

 1 <script>
 2         function createObj(uName) {
 3             this.userName = uName;
 4         }
 5         createObj.prototype.showName = function() {
 6             return this.userName;
 7         }
 8         var OT1 = new createObj("huanying2015");
 9         var OT2 = new createObj("alhouha");
10         console.log(OT1.showName()); //huanying2015
11         console.log(OT2.showName()); //alhouha
12         console.log(OT1.showName === OT2.showName); //true  两个函数都是原型对象上的，所以结果为true
13         console.log(OT1.__proto__ == createObj.prototype); //true  因为实例的隐式原型属性__proto__指向构造函数的原型对象
14         console.log(OT2.__proto__ == createObj.prototype); //true  因为实例的隐式原型属性__proto__指向构造函数的原型对象
15         console.log(createObj.prototype.__proto__ == Object.prototype); //true 因为构造函数的原型对象上的隐式原型属性，指向Object对象的原型对象
16         console.log(Object.prototype.__Proto__ == null); // true  因为Object 对象的原型对象上的隐式原型属性__proto__指向null
17     </script>

运行结果：

6. 判断一个方法是否是实例本身的：hasOwnProperty()

 1 <script>
 2         function createObj() {
 3             this.userName = "huanying2015";
 4         }
 5         createObj.prototype.userName = "aluoha";
 6         createObj.prototype.guestName = "代号：猎鹰行动";
 7         var obj1 = new createObj();
 8         var obj2 = new createObj();
 9         console.log(obj1.userName); //huanying2015
10         console.log(obj2.userName); //huanying2015
11         console.log(obj1.guestName); //代号：猎鹰行动
12 
13 
14         // 要判断一个属性或方法是否是实例本省的， 使用函数： hasOwnProperty();
15 
16         console.log(obj1.hasOwnProperty("userName")); // true 因为userName 是实例上的方法，所以返回true  ，在原型链中，根据就近原则进行查找
17         console.log(obj1.hasOwnProperty("guestName")); // false 因为guestName 不是实例上的方法，而是原型上的方法，所以返回false
18     </script>

运行结果：

7. in 操作符：如果一个属性或者方法在实例上或者在原型上，则返回true,否则返回false

 1 <script>
 2         //in:如果一个属性在实例或者原型对象(prototype), 返回true
 3         console.log('toString' in Object.prototype); //true 原型对象上可以调用  toString
 4         console.log('toString' in Object); // true 实例可以调用 toString
 5         console.log('valueOf' in Object.prototype); // true  原型对象上可以调用  valueOf
 6         console.log('hasOwnProperty' in Object.prototype); //true 原型对象上可以调用  hasOwnProperty
 7 
 8         console.log(Object.prototype);
 9 
10         var obj = {
11             userName: "huanying2015",
12         }
13         console.log('userName' in obj); // true  属性在实例上，所以为true
14         console.log('guestName' in obj); // false 属性不在实例上，所以为false
15 
16         function createObj() {
17             this.userName = "huanying2015";
18         }
19         createObj.prototype.guestName = "aluoha";
20         var OT = new createObj();
21         console.log('guestName' in OT); // true  属性在构造函数的原型对象上，所以为true
22     </script>

运行结果：

8. 判断一个属性是否在原型对象上：使用hasOwnProperty 和 in 来创建函数

 1  <script>
 2         // 有两个函数可以选择，一个是 hasOwnProperty(),判断是否在实例上；一个是 in ,判断属性是否在实例或者原型对象上
 3         // 业务逻辑：先使用hasOwnProperty 判断，如果返回true，说明这个属性在实例上；但是我们要判定的是属性是否在原型对象上，所以要先把实例上的属性给删除掉
 4         // 然后在用 in 来循环，因外之前已经删除了实例上的属性，如果此时判定结果为true，则在原型对象上；如果返回false,则说明不在原型对象上了
 5         function hasprototypeProperty(obj, name) {
 6             var catchObj = {};
 7             if (obj.hasOwnProperty(name)) { // 如果实例上有
 8                 catchObj[name] = obj[name]; // 把实例上的属性存入缓存
 9                 delete obj[name]; //清除实例上的属性
10                 if (name in obj) { // 在针对确认原型上有没有，如果有
11                     obj[name] = catchObj[name]; //因为刚才清除了实例上的属性，为了不改变对象，现在进行恢复实例上的属性
12                     return true; //说明原型对象上也有改属性，则返回true
13                 } else {
14                     obj[name] = catchObj[name]; //因为刚才清除了实例上的属性，为了不改变对象，现在进行恢复实例上的属性
15                     return false; // 说明原型对象上没有改属性，则返回false
16                 }
17             } else { //另一方面，如果实例上没有，则对原型对象进行循环遍历
18                 if (name in obj) { // 如果循环为真，这说明属性在原型对象上
19                     return true; // 返回true
20                 } else { // 如果循环为假，则说明属性不在原型对象上，
21                     return false; // 返回false 
22                 }
23             }
24         }
25 
26         function createObj() {
27             this.userName = "huanying2015";
28             this.guestName = "aluoha";
29 
30             this.show = function() {
31                 return this.userName;
32             }
33         }
34         createObj.prototype.userName = "huanying2015";
35         createObj.prototype.helloName = "nihaome";
36         var obj = new createObj();
37         console.log(hasprototypeProperty(obj, "userName")); // true   原型对象种有这个属性  ----实例有，原型对象上也有，所以返回true
38         console.log(hasprototypeProperty(obj, "helloName")); //true   原型对象中有这个属性  ----实例无，原型对象上有，所以返回true
39         console.log(hasprototypeProperty(obj, "guestName")); //false  原型对象中没有这个属性----实例有，原型对象上无，所以返回false
40 
41         console.log(obj.userName); // huanying2015
42         console.log(obj.guestName); //aluoha
43         console.log(obj);
44     </script>

运行结果：

posted on 2018-03-03 20:36 huanying2015 阅读(184) 评论(0) 编辑收藏举报