js最全的创建对象的方法

在js中,如果你想输入一个的信息,例如姓名,性别,年龄等,如果你用值类型来存储的话,那么你就必须要声明很多个变量才行,变量声明的多了的话,就会造成变量污染。所以最好的方式就是存储到对象中。下面能我就给大家介绍几种创建对象的方式,并且给大家说一下他们的优缺点

方式一:对象字面量

var obj={
                name:"赵云",
                type:"突进",
                skill:"抢人头"
            }

缺点:只能创建一次对象,复用性较差,如果要创建多个对象,代码冗余度太高

 

方式二:使用内置构造函数

var obj=new Object();
                obj.name="李白";
                obj.type="刺客";
                obj.skill="舞剑";

 

缺点:只能创建一次对象,复用性较差,如果要创建多个对象,代码冗余度太高

方式三:工厂模式(不推荐使用)

function creat(name,type,skill){
            var obj=new Object();
                obj.name=name;
                obj.type=type;
                obj.skill=skill;
                obj.say=function(){
                    console.log("黄河之水天上来");
                }
                return obj;
        }
        var hero=creat("李白","刺客","写诗");
        var heroNext=creat("赵云","突进","将军");

缺点:对象无法识别,因为所有的实例都指向一个原型

方法四:构造函数模式  使用了this

function Person(singer,song,type){
            //默认吧this传给new出来的对象,并且默认是返回该对象
            this.singer=singer;
            this.song=song;
            this.type=type;
        }
        var obj=new Person("田馥甄","小幸运","流行歌");
        console.log(obj);

注意点:1.如果不写返回值,默认返回的是新创建出来的对象 (一般都不会去写这个return语句)

     2.如果我们自己写return语句 return的是空值(return;),或者是基本类型的值或者null,都会默认返回新创建出来的对象

     3.如果返回的是object类型的值,将不会返回刚才新创建的对象,取而代之的是return后面的值

优点:实例时可以识别为一个特定的类型

缺点:构造函数中定义函数,那么每次创建对象,都会重新创建该函数,这样会导致全局变量增多,造成污染,代码结构会混乱,不易维护

方法五:原型

 function Person(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;

        }
        var p =new Person("张学友",18,"male");
        var p1 = new Person("刘德华",19,"male");
        Person.prototype.sayHello = function () {
            console.log("你好我是" + this.name);
        }
        Person.prototype["sing"] = function () {
            console.log("一千个伤心的母牛");
        }
        p.sayHello();
        p1.sayHello();
        p.sing();
        p1.sing();

优点:说明:构造函数的原型对象中的成员,可以被该构造函数创建出来的所有对象访问,而且,所有的对象共享该对象,所以,我们可以将构造函数中需要创建的函数,放到原型对象中存储,这样就解决 全局变量污染的问题 以及 代码结构混乱的问题;所有实例共享相同的属性和方法;

缺点:不能初始化参数;对于方法和基本属性值,这样很合适,但是对于引用类型的值,却出现了问题。在实例中重写引用类型的值会修改原型中的同名属性;所以很少有人单独使用原型模式;

方法六:组合使用构造函数模式和原型模式

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ['DJL','ZH']
}
Person.prototype = {
    constructor:Person,
    sayName:function(){
        alert(this.name);
    }
}
var personone = new Person("BlueBeginner",21,"web Engineer");
var persontwo = new Person("DJL",23,"web Engineer");
personone.friends.push('YR');
alert(personone.friends);//'DJL','ZH','YR'
alert(persontwo.friends);//'DJL','ZH'
alert(personone.sayName === persontwo.sayName);//true
alert(personone.friends == persontwo.friends);//false

这种模式将构造函数和原型分开,在构造函数里面写属性,在原型里面写方法,可以说,这是用来定义引用类型的一种默认模式,当然,有同学看到独立的构造函数和原型时,会感到困惑,下面这个模式,便解决了这个问题。

方法七:动态原型模式;

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    if(typeof this.sayName != 'function'){
        Person.prototype.sayName=function(){
            alert(this.name);
        };
    };
}

var personNew = new Person("aa",23,"IT");

personNew .sayName()   //aa

这种模式方法确实非常完美,if判断代码只会在初次调用构造函数时才会执行,此后,原型已经初始化,不需要再做什么修改了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值