JS 如何创建对象?

猿友 2021-01-11 11:35:47 浏览数 (2233)
反馈

一、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.创建函数
        function a(name, age) {
            var obj = {
                "name": "wang",
                "age": 19,
                "say": function () {
                }
            }
            return obj
        }
        //2.依次调用
        var obj1 = a("wang", 20);
        console.log(obj1);//{name: "wang", age: 19, say: ƒ}
        console.log(obj1 instanceof Object);//true

            //优点:返回新对象,互不影响
            //缺点:代码重复(方法相同)。
            //  没有从属关系,

四、构造函数

 //四、构造函数;
        //优点:有从属
        //缺点:代码重复(相同方法);
         //   1.创建函数
         //2.传入参数
        function A(name,age){
            //3.this。属性名=值
            this.name=name;
            this.age=age;
            this.say=function(){
            }
        }
        //调用 : var obj=new 构造函数(参数)
        
        var obj= new A("wang",19);
        console.log(obj);
        console.log( obj instanceof Object );//true
        console.log( obj instanceof A );//true

五、原型模式

 //原型优点:共同/相同的属性、方法不重复 有从属关系
        //缺点:原型上的属性不可单独改变
        function Fn(){
            
        }
        Fn.prototype.name="王";
        Fn.prototype.age=19;

        var obj=new Fn();
        console.log(obj);
        /*
        修改obj.__proto__.name
        obj.__proto__.name 发生变化
        obj2.__proto__.name 也发生变化
        obj和obj1 共用__proto__对象
        公共/相同的属性、方法放在构造函数.prototype上 实现代码不重复
        */
            obj.__proto__.name="李"
            console.log( obj.__proto__.name  );

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

推荐好课:

小白学前端:JavaScript零基础入门到进阶(2020版)

JavaScript实战:动态网站开发

JavaScript交互式网站实战开发


0 人点赞