Javascript对象创建

一、概述

　　虽然对象字面量可以用来创建对象，但在创建多个类似的对象时，不够优雅，不符合DRY原则。

二、创建对象

　　有以下几种模式：

　　1.工厂模式

　　2.构造函数模式

　　3.原型模式

　　4.组合构造函数和原型模式（推荐）

5.动态原型模式　（推荐）

6.稳妥构造函数模式　

　　1.工厂模式　　

function createPerson(name,age,job)

        {

            var o={

                name:name,

                age:age,

                job:job,

                saySelf:function(){

                    console.log(this.name+this.age+this.job);

                }

            };

            return o;

        }

        var person=createPerson("我是工厂模式建的",20,"ape");

        person.saySelf();

优点：可创建多个相似对象。

缺点：无法识别对象。

2.构造函数模式

function Person(name,age,job)

        {

            this.name=name;

            this.age=age;

            this.job=job;

            this.saySelf=function(){

                console.log(this.name+this.age+this.job);

            }

        }

        var person=new Person("构造函数模式",20,"ape");

        person.saySelf();

　特点：

1. 没有显式的创建对象，直接将属性和方法给了this;
2. 没有return;
3. 函数名大写，一般构造函数名大写;

　　　　要创建Person的实例，必须使用new操作符，Person的实例都有constructor属性，该属性指向Person();

        console.log(person.constructor===Person)//true

        console.log(person instanceof Person) //true 推荐

　　　　自定义构造函数可以标识为一种特定类型。

　　　　任何函数，只要通过new调用，就可以当作构造函数，构造函数与普通函数没什么两样。

　　　　优点：可识别类型。

　　　　缺点：每个方法要在每个实例上重建一遍，工厂模式也有此类问题。

console.log(person.saySelf===person2.saySelf);//false

　　3.原型模式

    (function(){

        function Person()

        {

        }

        Person.prototype.name='原型模式';

        Person.prototype.age='28';

        Person.prototype.job='Ape';

        Person.prototype.saySelf=function(count){

            if(count)

            console.log(count+":"+this.name+this.age+this.job);

            else

              console.log(this.name+this.age+this.job);

        }

        var person=new Person();

        var person2=new Person();

        person.saySelf();

        person2.saySelf();

        console.log(1,person.saySelf===person2.saySelf);//true

        console.log(2,Person.prototype.isPrototypeOf(person));//true

        console.log(3,Object.prototype.isPrototypeOf(person));//true

        console.log(4,Object.getPrototypeOf(person)===Person.prototype);//true

        console.log(8,person.name);

        person.name="看看变不变";

        person.saySelf(9);//9:看看变不变28Ape

        person2.saySelf(10);//10:原型模式28Ape

        delete person.name;

        person.saySelf(11);//11:原型模式28Ape

        person.__proto__.name="现在肯定变了";

        person2.saySelf();//现在肯定变了28Ape  只在Firefox、Safari、Chrome中有效

    })();

当添加一个属性时，这个属性就会屏蔽原型对象的同名属性。但是可以通过delete删除实例属性，让实例重新可以访问这个属性。说话是苍白的，看上面代码。

通过hasOwnProperty()可判断属性是否是实例自己的属性（区别于从原型上继承来的）。

        console.log(person.hasOwnProperty("name"));//true

        delete person.name;

        console.log(person.hasOwnProperty("name"));//false

那么，怎么检测某个属性是否是实例的属性呢，用in操作符，无论属性在实例中还是在原型中，都返回true

        console.log("in","name" in person);//true

        delete person.name;

        console.log("in","name" in person);//true

　　　　可用Object.keys()方法，返加一个所有可枚举属性的的字符串数组。

　　　　如果想得到，全部的属性可用Object.getOwnPropertyNames();

　　　　两个方法的共同点：均列举出自有属性，不查找原型链;

　　　　　　　　不同点：Object.keys()方法返回可枚举属性，Object.getOwnPropertyNames()返回所有属性的keys。

        person2.sex="男";

        console.log(Object.keys(Person.prototype).join(";"));//name;age;job;saySelf

        console.log(Object.getOwnPropertyNames(Person.prototype).join(";"));//constructor;name;age;job;saySelf

        console.log(Object.keys(person2).join(";"));//sex

        console.log(Object.getOwnPropertyNames(person2).join(";"));//sex

　　　　原型的动态性，这个很好理解，原型只是引用用，动态添加，当然可用。

　　　　但是，实例化一个对象后，再去重写一个原型，实例仍然指向原来的原型。

 //原型的动态性

    (function(){

        function Person()

        {

        }

        Person.prototype.name='原型模式';

        Person.prototype.age='28';

        Person.prototype.job='Ape';

        Person.prototype.saySelf=function(count){

            if(count)

                console.log(count+":"+this.name+this.age+this.job);

            else

                console.log(this.name+this.age+this.job);

        }

        var person=new Person();

        console.log(Object.getOwnPropertyNames(person.__proto__).join(";"));

        Person.prototype={

            constructor:Person,

            sex:"汉子"

        }

        var person2=new Person();

        console.log(Object.getOwnPropertyNames(person.__proto__).join(";"));

        console.log(Object.getOwnPropertyNames(person2.__proto__).join(";"));

    })();

　　优点：共享方法，可用isPrototypeOf检测是否是原型，在ES5中，可用getPrototypeOf得到原型。

　　缺点：不能拥有自己的属性。这个致命的缺点导致基本没有人用原型模式。

4.组合构造函数和原型模式。

function Person(name,age,job)

        {

            this.name=name;

            this.age=age;

            this.job=job;

        }

        Person.prototype={

            constructor:Person,

            saySelf:function()

            {

                console.log(this.name+this.age+this.job);

             }

        };

        Person.static=function()

        {

            console.log("这是一个静态方法");

        }

        var person=new Person();

        Person.static();//这是一个静态方法

        person.static();//Uncaught TypeError: undefined is not a function

　　　　这个模式解决了以上所有的缺点，同时具有以上所有的优点，是在javascript应用最广泛的创建自己定义类型的方法。是用来定义定义引用类型的一种默认模式。

　　5.动态原型模式　

    //动态原型模式

    (function(){

        function Person(name,age,job)

        {

            this.name=name;

            this.age=age;

            this.job=job;

            if(typeof this.saySelf!=="function") {

                Person.prototype.saySelf = function ()

                {

                    console.log(this.name + this.age + this.job);

                }

　　　　　　　　　

            }

        }

        var person=new Person("工厂模式",20,"frontEndpe");

        var person2=new Person("工厂模式Ac",20,"frontEndApe");

        person.saySelf();

        person2.saySelf();

    })();

优点：把原型封装构造函数中。

缺点：每个实例化都进行一次判断（这个也不算什么）。

　　6.稳妥构造函数模式　　

    //稳妥构造函数模式

    (function(){

        function Person(name)

        {

            var o={};

            //可以添加私有的方法和变量

            o.sayName=function()

            {

                console.log(name);

            }

            return o;

        }

        var person=Person("工厂模式");

        var person2=Person("工厂模式Ac");

        person.sayName();

        person2.sayName();

        var say=person2.sayName;

        say();

    })();

稳妥对象：没有公共属性的对象。

name属性只有sayName()闭包访问

三、总结

　　综合以上，推荐使用 4.组合构造函数和原型模式和5.动态原型模式。

　　它们都有以下优点：

　　1.都可以识别对象。

　　2.都可以有自己的属性值（constructor）和共享的属性（prototype）

四、代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<script>

"use strict";

(function(){

    // 工厂模式

    (function(){

        function createPerson(name,age,job)

        {

            var o={

                name:name,

                age:age,

                job:job,

                saySelf:function(){

                    console.log(this.name+this.age+this.job);

                }

            };

            return o;

        }

        var person=createPerson("工厂模式",20,"ape");

        var person2=createPerson("工厂模式2",20,"ape");

        console.log(person.saySelf===person2.saySelf);

        person.saySelf();

    });//();

    // 构造函数模式

    (function(){

        function Person(name,age,job)

        {

            this.name=name;

            this.age=age;

            this.job=job;

            this.saySelf=function(){

                console.log(this.name+this.age+this.job);

            }

        }

        var person=new Person("构造函数模式",20,"ape");

        var person2=new Person("构造函数模式2",20,"ape");

        person.saySelf();

        console.log(person.constructor===Person);//true

        console.log(person instanceof Person); //true 推荐

        console.log(person.saySelf===person2.saySelf);//false

    });//();

    //原型模式

    (function(){

        function Person()

        {

        }

        Person.prototype.name='原型模式';

        Person.prototype.age='28';

        Person.prototype.job='Ape';

        Person.prototype.saySelf=function(count){

            if(count)

            console.log(count+":"+this.name+this.age+this.job);

            else

              console.log(this.name+this.age+this.job);

        }

        var person=new Person();

        var person2=new Person();

        person.saySelf();

        person2.saySelf();

        console.log(1,person.saySelf===person2.saySelf);//true

        console.log(2,Person.prototype.isPrototypeOf(person));//true

        console.log(3,Object.prototype.isPrototypeOf(person));//true

        console.log(4,Object.getPrototypeOf(person)===Person.prototype);//true

        console.log(5,person.name);

        person.name="看看变不变";

        person.saySelf(9);//9:看看变不变28Ape

        person2.saySelf(10);//10:原型模式28Ape

        console.log(person.hasOwnProperty("name"));//true

        console.log("in","name" in person);//true

        delete person.name;

        console.log("in","name" in person);//true

        console.log(person.hasOwnProperty("name"));//false

        person.saySelf(11);//11:原型模式28Ape

        person.__proto__.name="现在肯定变了";

        person2.saySelf();//现在肯定变了28Ape  只在Firefox、Safari、Chrome中有效

        person2.sex="男";

        console.log(Object.keys(Person.prototype).join(";"));//name;age;job;saySelf

        console.log(Object.getOwnPropertyNames(Person.prototype).join(";"));//constructor;name;age;job;saySelf

        console.log(Object.keys(person2).join(";"));//sex

        console.log(Object.getOwnPropertyNames(person2).join(";"));//sex

    });//();

    //原型的动态性

    (function(){

        function Person()

        {

        }

        Person.prototype.name='原型模式';

        Person.prototype.age='28';

        Person.prototype.job='Ape';

        Person.prototype.saySelf=function(count){

            if(count)

                console.log(count+":"+this.name+this.age+this.job);

            else

                console.log(this.name+this.age+this.job);

        }

        var person=new Person();

        console.log(Object.getOwnPropertyNames(person.__proto__).join(";"));

        Person.prototype={

            constructor:Person,

            sex:"汉子"

        }

        var person2=new Person();

        console.log(Object.getOwnPropertyNames(person.__proto__).join(";"));

        console.log(Object.getOwnPropertyNames(person2.__proto__).join(";"));

    });//();

    //组合构造函数和原型模式。 最常用

    (function(){

        function Person(name,age,job)

        {

            this.name=name;

            this.age=age;

            this.job=job;

        }

        Person.prototype={

            constructor:Person,

            saySelf:function()

            {

                console.log(this.name+this.age+this.job);

             }

        };

        Person.static=function()

        {

            console.log("这是一个静态方法");

        }

        var person=new Person();

        Person.static();//这是一个静态方法

        person.static();//Uncaught TypeError: undefined is not a function

    });//();

    //动态原型模式

    (function(){

        function Person(name,age,job)

        {

            this.name=name;

            this.age=age;

            this.job=job;

            if(typeof this.saySelf!=="function") {

                Person.prototype.saySelf = function ()

                {

                    console.log(this.name + this.age + this.job);

                }

            }

        }

        var person=new Person("工厂模式",20,"frontEndpe");

        var person2=new Person("工厂模式Ac",20,"frontEndApe");

        person.saySelf();

        person2.saySelf();

    });//();

    //稳妥构造函数模式

    (function(){

        function Person(name)

        {

            var o={};

            //可以添加私有的方法和变量

            o.sayName=function()

            {

                console.log(name);

            }

            return o;

        }

        var person=Person("工厂模式");

        var person2=Person("工厂模式Ac");

        person.sayName();

        person2.sayName();

        var say=person2.sayName;

        say();

    });//();

})();

</script>

</body>

</html>

Javascript对象创建的更多相关文章

【JavaScript学习】JavaScript对象创建
1.最简单的方法,创建一个对象,然后添加属性 var person = new Object(); person.age = 23; person.name = "David"; ...
深入JavaScript对象创建的细节
最近深入学习javascript后,有个体会:面向对象的方式编程才是高效灵活的编程,也是现在唯一可以让代码更加健壮的编程方式.如果我们抛开那些玄乎的抽象出类等等思想,我自己对面向对象的从写程序的角度理 ...
JavaScript 对象创建
tips: JavaScript 除了null和undefined之外,其他变量都可以当做对象使用. JavaScript 的基本数据类型有:number boolean string null u ...
JavaScript对象创建的几种方式
1 工厂模式 1.1 创建 function createFruit(name,colors) { var o = new Object(); o.name = name; o.colors = co ...
Javascript 对象创建多种方式原型链
一.对象创建 1.new Object 方式直接赋上属性和方法 var obj = new Object(); obj.name = '娃娃'; obj.showName = function(){ ...
JavaScript对象创建，继承
创建对象在JS中创建对象有很多方式,第一种: var obj = new Object(); 第二种方式: var obj1 = {};//对象直面量第三种方式:工厂模式 function Per ...
javascript对象创建方式
工厂模式在ECMAscript中无法创建类,所以开发人员就发明了一种函数,用函数来封装,以特定接口创建对象的细节,如下面的例子所示: function createPerson(name,age,j ...
JavaScript—对象创建方式
JavaScript 也是面向对象的语言(oop) 之前学JavaScript 没有学对象.现在做下笔记创建对象的方式: 1．对象字面量 const hero = { name: '吕布', w ...
[JavaScript]对象创建方法
1.使用Object或对象字面量创建对象 (1)使用Object创建对象 var cat= new Object(); cat.name = "Tom"; cat.color= & ...

随机推荐

【转】yahoo前端优化军规
雅虎给出了前端优化的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). Minimize HTTP Requests 减少http请求图片.css ...
Aoite 系列(01) - 比 Dapper 更好用的 ORM
Aoite 是一个适于任何 .Net Framework 4.0+ 项目的快速开发整体解决方案.Aoite.Data 适用于市面上大多数的数据库提供程序,通过统一封装,可以在日常开发中简单便捷的操作数 ...
C#Light/Evil合体啦
决定将C#Light和C#Evil合并成一个项目,毕竟C#Evil包含C#Light所有的功能,分开两个,基本的表达式方面有什么bug还得两头改暂时就C#Light/Evil这么叫吧,庆祝合体,画了 ...
[stm32] NRF24L01+USART搞定有线和无线通信
前言一般进行远程监控时,2.4G无线通信是充当远程数据传输的一种方法.这时就需要在现场部分具备无线数据发送装置,而在上位机部分由于一般只有串口,所以将采集到的数据送到电脑里又要在上位机端设计一个数据 ...
as3 Loader 加载资源后内存泄露无法释放的问题。
本人用Loader加载外部一个swf.之后unloadAndStop,Flash概要分析发现,内存没有被释放. 网上搜了一大堆文章,要么就是加载bitmapdata之后,自己dispose,要么就是加 ...
Linux gcc的安装
说明:我是在虚拟机里学习的Linux,很多问题也是和虚拟机有关的.今天就遇到了虚拟机安装gcc是一个问题. 首先查看gcc是否安装: 然后安装gcc.(我的错误就出现在这里.) 我用的虚拟机,练习平时 ...
知方可补不足~row_number,rank,dense_rank,ntile排名函数的用法
回到目录这篇文章介绍SQL中4个很有意思的函数,我称它的行标函数,它们是row_number,rank,dense_rank和ntile,下面分别进行介绍. 一 row_number:它为数据表加一 ...
带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍带你走近AngularJS - 体验指令实例带你走近AngularJS - 创建自定义指令 ------------- ...
Atitit 热更新资源管理器自动更新管理器功能设计
Atitit 热更新资源管理器自动更新管理器功能设计 · 多线程并行下载支持 · 两层进度统计信息:文件级以及字节级 · Zip压缩文件支持 · 断点续传 · 详细的错误报告 · 文件下载失败重试 ...
DOM_02之查找及元素操作
1.查找之按节点间关系查找周围元素: 2.查找之HTML属性:①按id查找:var elem=document.getElementById("id"):找到一个元素,必须docu ...

Javascript对象创建

Javascript对象创建的更多相关文章

随机推荐

热门专题