代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>创建对象的模式</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->

     <!--<script src="main.js"></script>-->

 </head>

 <body>

 <script>

     //js中没有类的概念，所以开发人员使用函数来封装特定接口从而创建对象

     //1.工厂模式，解决了创建多个相似对象的问题，但是没有解决对象识别问题

     function t1(name,age,sex){

         var o={};

         o.name=name;

         o.age=age;

         o.sex=sex;

         return o;

     };

     var p1=t1('张三',21,'male');

     var p2=t1('Alice',23,'female');

     console.log(p1,p2);

     console.log(typeof p1,typeof p2);

 //    2.构造函数模式

     function T2(name,age,sex){

         this.name=name;

         this.age=age;

         this.sex=sex;

         this.showInfo=function(){

             console.log(this.name+' '+this.age+' '+this.sex);

         }

     }

     var p3=new T2('李四',25,'male');

     var p4=new T2('Mary',22,'female');

     //此时对象的constructor是用来标识对象类型的

     console.log(p3,p4,p3.constructor===T2,p4.constructor===T2);

     console.log(p3 instanceof Object,p3 instanceof T2);

     //如果将构造函数作为普通函数调用，那么属性和方法都被添加到全局对象，这里是window

     T2('ww',29,'male');

     console.log(window.name,age,sex);

 //    构造函数模式存在的缺陷：构造函数里面的方法(上面指showInfo)不是共享的，即每次的showInfo不相同

     console.log(p3.showInfo===p4.showInfo);

 //    3.原型模式

     function T3(){

     }

     T3.prototype.name='Aya';

     T3.prototype.age=100;

     T3.prototype.showInfo=function(){

         console.log(this.name);

     };

     var p5=new T3();

     p5.showInfo();

     var p6=new T3();

     p6.showInfo();

     console.log(p5.showInfo===p6.showInfo);

 //    实例中的属性或方法会覆盖原型中的属性或方法

     p5.name='xiaoming';

     p5.showInfo();

     delete p5.name;

     p5.showInfo();

 //    js引擎对属性的寻找都是从下往上追溯的

 //    使用hasOwnProperty()可以检测属性在实例上，还是在原型上

     p6.name='nicai';

     console.log(p6.hasOwnProperty('name'));

 //    使用in，属性在原型上或者实例上，均返回true

     console.log('name' in p5,'name' in p6);

 //    所以当hasOwnProperty()返回false,而in返回true，那么属性位于原型上

     if (!p5.hasOwnProperty('name') && 'name' in p5){

         console.log('name属性在原型上');

     }

 //    原型模式更直观的可以写为下面形式：

     function T4(){}

     T4.prototype={

         name:'abc',

         age:100,

         sayHi:function(){

             console.log(this.name);

         }

     }

 //    原型模式存在的问题:1.所有属性初始值一样;2.最大的问题，当含有引用类型时，一个实例对象的修改会导致其它实例对象也跟着修改

     function T5(){}

     T5.prototype={

         constructor:T5,

         name:'abc',

         age:100,

         arr:[1,2,3]

     }

     var p7=new T5();

     var p8=new T5();

     //所有实例对象的引用类型会相应变化

     p7.arr.unshift(0);

     //实例对象的基本类型倒不影响

     p7.name='Bob';

     console.log(p7.arr,p8.arr,p7.name,p8.name);

 //    4.组合使用构造函数模式与原型模式

 //    是目前在ECMAScript使用最广泛、认可度最高的一种创建自定义类型的方法

     function Person(name,age){

         this.name=name;

         this.age=age;

         this.friends=['Alice','Bob'];

     }

     Person.prototype={

         constructor:Person,

         sayHello:function(){

             console.log(this.name);

         }

     };

     var per1=new Person('Apple',1000);

     var per2=new Person('Blue',10);

     per1.friends.push('cat');

     console.log(per1.friends,per2.friends);

     console.log(per1.sayHello===per2.sayHello);

 //    5.动态原型模式

     function Person1(name,age){

         this.name=name;

         this.age=age;

         if(typeof this.sayHello !== 'function'){

             Person1.prototype.sayHello=function(){

                 console.log(this.name);

             }

         }

     }

     var per3=new Person1('Bill',111);

     console.log(per3);

 //    6.寄生(parasitic)构造函数模式

 //    其实与工厂模式一样，除了使用构造函数和new操作符

     function Person2(name,age){

         var o={};

         o.name=name;

         o.age=age;

         return o;

     }

     var per4=new Person2('Egg',100);

 //    7.稳妥(durable)构造函数

 //    与寄生构造函数模式类似，但两处不同点：1.新创建对象的实例方法不使用this 2.不使用new 调用构造函数

 //    稳妥构造函数适合在某些安全环境下

     function Test3(age){

         var o={};

         o.showName=function(){

             console.log(age);

         };

         return o;

     }

     var per5=Test3(100);

     console.log(per5);

 </script>

 </body>

 </html>

运行结果：

参考<<JavaScript高级程序语言设计>>

JavaScript中创建对象的几种模式的更多相关文章

  1. JavaScript中创建对象的三种模式

    JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返回. 缺点:创建的对象无法识别类型(全是Object) 2.构造函数模式: ...

  2. JavaScript中创建对象的5种模式

    构造函数模式 实现方式: function Person(name, age, job) { this.name = name; this.age = age; this.job = job; thi ...

  3. javascript中创建对象的几种不同方法

    javascript中创建对象的几种不同方法 方法一:最直白的方式:字面量模式创建 <script> var person={ name:"小明", age:20, s ...

  4. JavaScript中创建对象的三种方式!

    JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...

  5. javascript中创建对象的几种方式

    1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的值. var person = new Object(); person.name=&q ...

  6. javascript 创建对象的7种模式

    使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...

  7. 深入理解JavaScript中创建对象模式的演变（原型）

    深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...

  8. 《JAVASCRIPT高级程序设计》创建对象的七种模式

    细看javascript创建对象模式的诞生,具体的脉络为:不使用任何模式——工厂模式——构造函数模式——原型模式——组合使用构造函数模式——动态原型模式——寄生构造函数模式——稳妥构造函数模式.每一种 ...

  9. javascript中创建对象和实现继承

    # oo ##创建对象 1. 原型.构造函数.实例之间的关系 * 原型的construct->构造函数:调用isPrototypeOf(obj)方法可以判定和实例的关系:  * 构造函数的pro ...

随机推荐

  1. Jquery中事件的重复绑定

    问题:事件的绑定具有叠加效果,已有绑定的函数时,再次绑定,执行时会出现绑定多少次,触发多少次的情况 解决:1.on();绑定事件,提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind(). ...

  2. flash上传头像，截取图像 组件演示

    效果图如下: HTML页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// ...

  3. centos6.5安装nginx+python+uwsgi+django

    nginx+uwsgi+django环境部署及测试 默认系统自带的python2.6.6 第一步(安装setuptools) wget https://pypi.python.org/packages ...

  4. OI/ACM 刷题网站 人气OJ简介

         SPOJ简介 SPOJ是波兰最为出色的Online Judge之一,界面和谐,题目类型也非常丰富,适合有一定基础的选手练习,对高手而言也是个提高能力的良好平台. SPOJ题目分类:class ...

  5. css3图形绘制

    以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(bo ...

  6. 加密传输：每位数字+6，然后用除以9的余数代替该数字， 在把第一位和第四位交换，第二位和第三位交换，例如3276->3840

    /** * @author:(LiberHome) * @date:Created in 2019/3/6 10:00 * @description: * @version:$ */ /*今日目标:5 ...

  7. mysql添加字段

    使用事务给表添加字段 #添加字段说明 USE test;/*库名*/ DROP PROCEDURE IF EXISTS schema_change; DELIMITER // CREATE PROCE ...

  8. nginx上通过ssl证书将http转发为https

    环境:阿里云linux,ngnix 1.16.0 ,ssl证书,XXXX.jar 0.自行在阿里云上下载免费的ssl证书.里面有2个文件.key和pem后面要用到. 1.首先将项目在linux上跑起来 ...

  9. 6. Scala面向对象编程(基础部分)

    6.1 基本介绍 6.1.1 Scala语言是面向对象的 1) Java时面向对象的编程语言,由于历史原因,Java中海存在着非面向对象的内容:基本类型,null,静态方法等 2) Scala语言来自 ...

  10. [git] git怎样fork一个repo

    描述 我定制了一下strongswan的工程.然后想把我自己的定制变成一个repo push到远端git.tong.com与大家分享. 这个时候,应该怎么做? 如果你用过github的话.那么你可以理 ...