zoukankan      html  css  js  c++  java
  • 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>

    运行结果:

    http://www.cnblogs.com/huanying2015 博客随笔大多数文章均属原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利
  • 相关阅读:
    jperf windows
    Eclipse+Maven命令创建webapp项目<三>
    Eclipse+Maven创建webapp项目<二>
    Eclipse+Maven创建webapp项目<一>
    在java中定义有几种类加载器
    JAVA创建对象有哪几种方式 ?
    js创建对象的几种常用方式小结(推荐)
    maven安装以及eclipse配置maven
    MyEclipse 10.0安装及激活步骤
    jdk下载网址
  • 原文地址:https://www.cnblogs.com/huanying2015/p/8502887.html
Copyright © 2011-2022 走看看