JS创建对象的几种方法

迈不过友情╰ 2022-05-18 03:38 332阅读 0赞

自己认为目前能较好理解的创建对象方法，可能在某些方面不是最优的方法

// 1. 创建使用函数创建（工厂模式）
    	function Person(age,name){
    		this.age = age || void 0;                    //void 0 相当于 undefined  ，，自己设置好undefined更踏实
    		this.name = name || void 0;
    		this.print = function(){                      //为Person类添加一个方法
    			console.log(this.age);                    //输出Person类的age
    			console.log(this.name);                  //输出Person类的name
    		};
    	};
    	Person.prototype.gender = '男' ;                 //prototype，属性使您有能力向对象(类)添加属性和方法。 类外部添加Person属性
    	Person.prototype.address = function() {         //类外部添加Person方法
    		console.log('北京市');
    	};
    	// 创建一个实例对象
    	var youngperson = new Person();               //或者  var youngperson = new Person('张三',12);
    	youngperson.print();                          //输出 0 0
    	console.log(Person.prototype.gender);         //输出男
    	youngperson.address();                        //输出 北京市
    	youngperson.test = 'good';                    //为某个对象添加属性
    	console.log(youngperson.test);                //输出good

以下为转载

转载来源   [https://www.jb51.net/article/91463.htm][https_www.jb51.net_article_91463.htm]

JS是基于对象的语言，可以使用面向对象思想模拟JAVA|C++之类的面向对象语言。  
 •面向过程   
◦关注解决问题的步骤

•面向对象   
◦关注的是解决问题的所需要的对象（内容和角色），然后根据业务逻辑按一定规则调用相关方法

对象分为系统对象和自定义对象两种。我们可以通过调用系统构造函数来创建出系统对象，如：array|date等。自定义对象必须自己创造，无法利用系统函数来创造。

**javascript创建对象 **

**一、直接创建**

//直接创建
         //JS创建对象
         //1：创建空对象
             var person1 = new Object();
         //2:将该对象所需要的属性、方法加进去
             person1.name ="ailer" ;
             console .log(person1.name);
             person1.gender = "male";
         //3:该对象添加的方法|(函数)
             person1. manager= function (){
               console .log("Ailer is my English name" );
            }
         //4:调用对象方法：对象.方法名();
             person1.manager();
    
         //函数|方法？函数属于对象时，该函数属于这个对象下的方法；通过方法名来调用该函数；
         //变量|属性 ？当变量属于某一个对象时候， 该变量就是这个对象下的方法。通过属性名来调用变量。
    
          //增
             person1.age ="6" ;
          //改
             person1.name ="lemon" ;
          //查
             console .log(person1.name);
         //删
             delete person1.age;
             console .log(person1.age);==> undefined
    
          //引用类型，存储的是地址
          //基本类型：存储的是值 标志位
    
         /*  var arr1 = [1,2,3,4]
            var arr2 = [5, 6, 7,9];
            var arr2 = arr1;//
            arr2[0]=10;//更改arr2里面的值，arr1也更改
            alert(arr1[0]);//====>10 引用类型*/
    
            var per2 = new Object();
            per2.name = "Relia";
            per2.age = "18";
            per2.gender = "femal";
            per2.hobby = "lemons";
    
             //1:通过.(点语法)访问属性
             //2:通过[](方括号)访问对象的属性;方括号中必须是属性字符串或保存属性字符串的变量|遍历属性的时候才使用方括号
             var n = "name"
             //console.log(per2["name"]);//双引号
    
             console .log(per2[n]);
             for ( var property in per2) {
    //          console.log(per2[property]);
             }

虽然直观，但是创建多个对象的时候，代码冗余

**二、使用函数创建（工厂模式）**

为了解决多个类似对象声明的问题，我们可以使用一种叫做工厂模式的方法，这种方法就是为了解决实例化对象产生大量重复的问题。

//定义构造函数      
     function createPerson ( name, age) {
    //创建一个新的空对象
               var person = new Object;
    //添加属性|方法
               person.name = name;
               person.age = age;
               person. manager = function() {
                  console .log("ai" );
               }
    //返回
               return person;
            }
    
             var per1 = createPerson( "ailer", 12 );
             console .log(per1.name);
    
            var per2 = createPerson( "lemon", 23 );
            console .log(per2.age);
            console.log(per2 instanceof Object);//true
            console.log(per2 instanceof createPerson);//false//无法区分该对象类型
            console.log(per2.manager==per1.manager);//false 可得出per1和per2各自开闭空间

优：批量创建同类实例  
缺：实例用同类属性， 造成内存浪费无法公，且无法区分该对象的类型

**三、 字面量创建**

优:简单直接  
缺：无法批量构建同类对象

//字面量创建的对象使用constructor属性不会指向实例，而是指向object
     //使用字面量创建
           var per1 = {
            name:"Ailer",
             constructor:per1,
            age:12,
            gender:"female",
            hobby:"play",
            eat:function(){
              console.log(this.name);
            }
           }
           per1.eat();//ailer
           per1.name="lemon";
           per1.eat();//lemon
           console.log(typeof per1);//Object
           console.log(per1.constructor==Object);//true

** 四、new+构造函数**

//构造函数创建对象，其子对象用instanceof不识别，所有采用new+obj创建
            //对象识别了，但是仍然浪费一些代码区；==>产生原型创建
            //创建js对象 new+构造函数
            //1：创建构造函数 |通常首字母大写
            function CreatePerson( name , age){
              //2：把对象的属性|方法挂靠在this指针身上， 当调用该函数创建对象时，this指针就指向这个新对象；
              //这个this就添加给这个对象
              this.name = name;
              this.age = age;
              /*this.speak = function(){
                //此处this也指向创建对象
                console.log(this.name+" hello");
              }
            }
    
          /* CreatePerson.prototype.gender = "20";
           CreatePerson.prototype. ea = function(){
              console .log(this.name+ "sfd" );
           }*/
    
    //      __proto__:是：实例对象中的原型属性， 指向对应构造函数对应的原型对象
    //      [[prototype]]
            //调用
            var per1 = new CreatePerson( "ailer", "20" );
            var per2 = new CreatePerson( "relia", "18" );
            console .log(per1 instanceof CreatePerson); //==true
            console .log(per2 instanceof CreatePerson); //==>true
            console .log(per1.speak== per2.speak); //==false说明系统开辟了两个不同的代码区，造成了内存浪费.

字面量创建一个比较方便，所以产生构造函数，普通构造函数(工厂模式)，子对象instanceof不识别且内存浪费，用new+构造函数，子对象识别了，但仍有部分代码重复，内存浪费，产生原型代码解决。

**五、原型模式**

**动态原型模式**

//构造函数中初始化原型
    function per(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            //只在初始化原型的时候执行一次
            if(typeof this.sayName != "function") {
              Person.prototype.sayName = function() {
                alert(this.name);
              }
            }
          }

[https_www.jb51.net_article_91463.htm]: https://www.jb51.net/article/91463.htm