JavaScript创建对象的6种方法

创建对象的六种方法:

(一) 字面量的方式:

声明一个变量,依次设置属性和属性值,也可以增加属性

var obj1={"name":"王","age":20};
    obj1.sex="男";
console.log(obj1.name);  //王
console.log(obj1);  //{name: "王", age: 20, sex: "男"}

(二) new Object

new一个新对象,增加属性,也可以通过变量的方式增加属性,那么就需要在最上层声明一个变量,否则就要在[" "]字符串格式

var x="age";
var obj=new Object();
    obj.name="张";
    obj[x]=20;   //[]中放的是变量,如果没有声明变量就要放字符串
console.log(obj);  //{name: "张", age: 20}

(三) 工厂模式(工厂函数)

1. 创建函数
2. 传入参数
3. 创建对象
4. return 对象
   优点:返回独立新对象 互不影响
   缺点:代码重复(相同方法),没有从属

function fn(a,b){
        var obj2={
              "name":"张XXX",
              "age":26,
              "say":function(){}
        }
         return obj2
}
 console.log(fn("name","张XXX"));  //{name: "张XXX", age: 26, say: ƒ}

(四) 构造函数模式

5. 创建函数
6. 传入参数
7. this.属性名=值
8. 调用时 new 函数名()
   优点:有从属关系
   缺点:代码重复(相同方法)

function Fn(name,age){
        this.name=name;
        this.age=age
        this.say=function(){}
}
var obj3=new Fn("刘","25")
    obj3.sex="男";
console.log(obj3); //{name: "刘", age: "25", sex: "男", say: ƒ}

(五) 原型模式

9. 创建函数
10. 设置函数的原型
11. 将函数变成一个对象
12. 可以给对象设置属性,原型链
    每个函数中都有一个prototype的值 属性的值是对象称为原型对象
    优点:公共/相同的属性 方法 不重复
    缺点:原型上属性不可变

function Fn(){
}
 Fn.prototype.name="敖民";
 Fn.prototype.age=18;
 var obj4=new Fn();
     obj4.sex="女";
     obj4.__proto__.age=24;
     obj4.__proto__.sex="女";
 console.log(obj4);
var obj5=new Fn();
console.log(obj5);

(六) 组合模式 (构造函数模式+原型模式)

13. 属性 定义在构造函数内
14. 方法 定义在构造函数 原型对象上

function Fn(name,age){
        this.name=name;
        this.age=age;
}
Fn.prototype.say=function(){
         console.log("上课!");
}
var obj6=new Fn("雪碧",3);
var obj06=new Fn("可乐",1); 
    obj6.say();
console.log(obj6);