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("赵云","突进","将军");

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

方法四:构造函数模式

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();

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

时间: 2024-10-24 22:05:08

js创建对象的多种方式及优缺点的相关文章

js 创建对象的多种方式

参考: javascript 高级程序设计第三版 工厂模式 12345678910 function (name) { var obj = new Object() obj.name = name obj.getName = function() { console.log(this.name) } return obj} var person1 = createPerson('jack') 缺点:对象无法识别,所有实例都指向同一个原型 构造函数模式 1234567 function Perso

深入之创建对象的多种方式以及优缺点

// 1. 工厂模式 //缺点:对象无法识别,因为原型都指向Object function pe() { var o = new Object(); o.name = name; o.getname = function() { console.log(this.name) } return o } // 2. 构造函数模式 // 优点:实例可以识别为一个特定的类型 // 缺点:每次创建实例每个方法都要被创建一次 function Person(name) { this.name = name;

Javascript深入之创建对象的多种方式以及优缺点

1.工厂模式 function createPerson(name) { var o = new Object(); o.name = name; o.getName = function() { console.log(this.name) }; return o; } var person1 = createPerson('kevin') 缺点:对象无法识别,因为所以的实例都指向一个原型 2.构造函数模式 function Person(name) { this.name = name; t

Javascript继承的多种方式和优缺点

本文讲解JavaScript各种继承方式和优缺点. 一.原型链继承 function Parent () { this.name = 'kevin'; } Parent.prototype.getName = function () { console.log(this.name); } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); console.log(child1.getNam

js和css多种方式实现隔行变色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>两种方式让css隔行变色js和css3属性.box li:nth-of-type</title>

js创建对象的最佳方式

1.对象的定义 ECMAScript中,对象是一个无序属性集,这里的"属性"可以是基本值.对象或者函数 2.数据属性与访问器属性 数据属性即有值的属性,可以设置属性只读.不可删除.不可枚举等等 访问器属性是用来设置getter和setter的,在属性名前加上"_"(下划线)表示该属性只能通过访问器访问(私有属性),但并不是说添个下划线就把属性变成私有的了,这只是习惯约定的一种命名方式而已.访问器属性没什么用,原因如下: var book={ _year:2004,

JavaScript中继承的多种方式和优缺点

// 原型链继承 /** * 1. 原型链继承 * 缺点: * 1. 在子类中不能向父类传参 * 2. 父类中所有引用类型的属性会被所有子类实例共享,也就说一个子类实例修改了父类中的某个引用类型的属性时,其他子类实例也会受到影响 */ function Parent() { this.name = "parent"; this.hobby = ["sing", "rap"]; } function Child() { this.type = &q

js创建对象的四种方式以及消耗时间比较

// Property-less object console.time('zoop1'); var zoop = (function (numObjects) { var pooz = Object.create(null); for(var i = 0; i< numObjects; i++) { pooz[i] = Object.create(null); } return pooz; })(1000000); console.timeEnd('zoop1'); // Using Obje

蓝鸥原生JS:js的历史及JavaScript的优缺点

蓝鸥原生JS:js的历史及JavaScript的优缺点 蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 JS介绍 js的历史 在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司. 由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言.你没看错,这哥们只用了1