JS 如何創(chuàng)建對(duì)象？

一、new Object（）；

 var x="age"

        var obj=new Object();
        obj.name="wang";
        obj.x=20; //.字符串
        obj[x]=25; //[變量]
        console.log(obj);//{name: "wang", x: 20, age: 25}

二、字面量

 var a="hobby"
        var obj={"name":"wang","age":"18"};

            obj.sex="男";
            obj[a]="唱歌";
            obj.say=function(){
            }
            console.log(obj);//{name: "wang", age: "18", sex: "男", hobby: "唱歌", say: ?}
            var obj2={"aa bb":"hellow",".x":"world"};
            console.log(obj2["aa bb"]);//hellow
            console.log( obj2[".x"] );//world

三、工廠模式；

 //1.創(chuàng)建函數(shù)
        function a(name, age) {
            var obj = {
                "name": "wang",
                "age": 19,
                "say": function () {
                }
            }
            return obj
        }
        //2.依次調(diào)用
        var obj1 = a("wang", 20);
        console.log(obj1);//{name: "wang", age: 19, say: ?}
        console.log(obj1 instanceof Object);//true

            //優(yōu)點(diǎn)：返回新對(duì)象，互不影響
            //缺點(diǎn)：代碼重復(fù)（方法相同）。
            //  沒(méi)有從屬關(guān)系，

四、構(gòu)造函數(shù)

 //四、構(gòu)造函數(shù)；
        //優(yōu)點(diǎn)：有從屬
        //缺點(diǎn)：代碼重復(fù)(相同方法)；
         //   1.創(chuàng)建函數(shù)
         //2.傳入?yún)?shù)
        function A(name,age){
            //3.this。屬性名=值
            this.name=name;
            this.age=age;
            this.say=function(){
            }
        }
        //調(diào)用 ： var obj=new 構(gòu)造函數(shù)(參數(shù))
        
        var obj= new A("wang",19);
        console.log(obj);
        console.log( obj instanceof Object );//true
        console.log( obj instanceof A );//true

五、原型模式

 //原型優(yōu)點(diǎn)：共同/相同的屬性、方法不重復(fù) 有從屬關(guān)系
        //缺點(diǎn)：原型上的屬性不可單獨(dú)改變
        function Fn(){
            
        }
        Fn.prototype.name="王";
        Fn.prototype.age=19;

        var obj=new Fn();
        console.log(obj);
        /*
        修改obj.__proto__.name
        obj.__proto__.name 發(fā)生變化
        obj2.__proto__.name 也發(fā)生變化
        obj和obj1 共用__proto__對(duì)象
        公共/相同的屬性、方法放在構(gòu)造函數(shù).prototype上 實(shí)現(xiàn)代碼不重復(fù)
        */
            obj.__proto__.name="李"
            console.log( obj.__proto__.name  );

            var obj2=new Fn();
            console.log(obj2);
            console.log(obj.__proto__.name);

推薦好課：

小白學(xué)前端：JavaScript零基礎(chǔ)入門到進(jìn)階(2020版)

JavaScript實(shí)戰(zhàn)：動(dòng)態(tài)網(wǎng)站開發(fā)

JavaScript交互式網(wǎng)站實(shí)戰(zhàn)開發(fā)