对象的字面量

 var obj={}

创建实例对象
 var obj=new Object()

工厂模式

 function cPerson(name,sex,age){
var o = new Object();
o.name = name;
o.sex = sex;
o.age = age;
o.show = function(){
console.log(this.name,this.age,this.sex);
}
return o;
}
var p1 = cPerson('谦龙','男','100');
p1.show();
var p2 = cPerson('雏田','女','14');
p2.show();

工厂模式测试

工厂方式的问题:使用工厂模式能够创建一个包含所有信息的对象,可以无数次的调用的这个函数。虽然其解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即如何得知一个对象的类型)

构造函数模式

function CPerson(name,sex,age) {//注意这里 构造函数首字母大写
this.name = name;
this.sex = sex;
this.age = age;
this.show = function () {
console.log(this.name, this.age, this.sex);
}
}
var p1 = new CPerson('谦龙','男','100');
p1.show();
var p2 = new CPerson('雏田','女','14');
p2.show();

构造函数模式测试

注意构造函数与工厂模式有些不同的地方,如下

构造函数首字母大写

没有显式地创建对象

将属性和方法赋值给了 this 对象

没有return语句

而且以这种方式来调用构造函数会大致经历一下 几个步骤

创建一个新的对象

将构造函数的作用域赋值给这个对象(因此this就指向了这个对象)

执行构造函数中的代码(即给新对象添加属性和方法的过程)

返回对象

注意:构造函数其实和普通的函数没有太大的差别,唯一的不同在于调用方式的不同。以下演示不同的几种调用方式

 // 调用方式1 new 方式
var p1 = new CPerson('谦龙','男','100');
p1.show();//谦龙 100 男
// 调用方式2 普通函数调用
CPerson('谦龙','男','100');
window.show()//谦龙 100 男 注意属性和方法会被设置到window对象上
// 调用方式3 在另一个对象的作用域中调用
var obj = new Object();
CPerson.call(obj,'谦龙','男','100');
obj.show(); //谦龙 100 男 在obj的作用域

构造函数的问题:使用构造函数最主要的问题就是每个方法都要在每个实例上重新创建一次,p1与p2的都有show方法,但不是同一个Function的实例,因为function在js中也是一个对象。因此他们共有的show方法并不相等。

原型模式

每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象。而这个对象的用途是 包含可以由 特定类型 的所有 实例 共享的属性和方法。即调用构造函数所创建的那个对象的 原型对象

好处是可以让所有对象的实例共享他的属性的方法。即无需在构造函数中定义实例的信息

 function CPerson(){
}
CPerson.prototype.name='谦龙';
CPerson.prototype.sex='男';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
p1.show(); //谦龙 100 男
var p2 = new CPerson();
p2.show();//谦龙 100 男
console.log(p1.show == p2.show)//true

js面向对象的几种方式----工厂模式、构造函数模式、原型模式的更多相关文章

  1. js面向对象的几种方式

    对象的字面量 var obj={}:创建实例对象 var obj=new Object();构造函数模式 function fn(){}, new fn();工厂模式:用一个函数,通过传递参数返回对象 ...

  2. JS面向对象的几种写法

    JS 中,面向对象有几种写法.归纳下,大概有下面这几种:工厂模式,构造函数模式,原型模式,构造函数与原型模式的混合使用,原型链继承,借用构造函数继承. 一.工厂模式 function person ( ...

  3. js创建对象的几种方式

    /** * 顺便重温一下对象的创建方式 * 代码简单说明问题就好 * 概念性的东西这里就不提了,只加上自己简单理解 */ /** * 工厂模式,就是将手动的创建细节封装在一个方法里, * return ...

  4. js面向对象初步探究(上) js面向对象的5种写方法

    非常长一段时间看网上大神的JS代码特别吃力.那种面向对象的写法方式让人看得云里来雾里去.于是就研究了一下JS面向对象.因为是初学,就将自己在网上找到的资料整理一下,作为记忆. js面向对象的5种写方法 ...

  5. js创建对象的6种方式总结

    1.new 操作符 + Object 创建对象 var person = new Object(); person.name = "lisi"; person.age = 21; ...

  6. NET设计模式 第二部分 创建型模式(5):原型模式(Prototype Pattern)

    原型模式(Prototype Pattern) ——.NET设计模式系列之六 Terrylee,2006年1月 概述 在软件系统中,有时候面临的产品类是动态变化的,而且这个产品类具有一定的等级结构.这 ...

  7. js创建对象的三种方式和js工厂模式创建对象

    文章地址: https://www.cnblogs.com/sandraryan/ 创建对象 创建对象的三种方式 构造函数 ,是一种特殊的方法.主要用来在创建对象时初始化对象 1. 调用系统的构造函数 ...

  8. js创建对象的几种方式(工厂模式、构造函数模式、原型模式)

    普通方法创建对象 var obj = { name:"猪八戒", sayname:function () { alert(this.name); } } var obj1 = { ...

  9. JS 创建对象的几种方式

    面向对象就是把属性和操作属性的方法放在一起作为一个相互依存的整体--对象,即拥有类的概念,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性! ECMA-262把对象定义为:"无 ...

随机推荐

  1. Web.xml配置详解之context-param(转)

    转自:http://blog.csdn.net/liaoxiaohua1981/article/details/6759206 格式定义: <context-param> <para ...

  2. mongodb数据库管道操作

    1.$project(修改文档的结构,可以用来重命名.增加或删除文档中的字段) db.order.aggregate([ { $project:{ rade_no:1, all_price:1} } ...

  3. Spring boot自定义拦截器和拦截器重定向配置简单介绍

    大家好: 本文简单介绍一下用于权限控制的Spring boot拦截器配置,拦截器重定向问题. 开发工具:jdk1.8   idea2017(付费版,网上找的破解教程) 1,首先使用idea创建一个Sp ...

  4. php-异步上传插件

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html

  5. linux IPC的PIPE

    一.PIPE(无名管道) 函数原型: #include <unistd.h> ]); 通常,进程会先调用pipe,接着调用fork,从而创建从父进程到子进程的IPC通道. 父进程和子进程之 ...

  6. 思维+双指针+环——cf1244F

    /* 可以发现一个性质:连续两个相同色块永远不会变色 继而可以发现,这个色段每次迭代都向左向右拓展长度1,直到撞上其他扩张的色段 所以预处理出所有连续色段,然后对于所有不在色段里的点,我们可以预测其最 ...

  7. 拆边+BFS队列骚操作——cf1209F

    这个拆边+队列操作实在是太秒了 队列头结点存的是一个存点集的vector,1到这个点集经过的路径权值是一样的,所以向下一层拓展时,先依次走一遍每个点的0边,再走1边...以此类推,能保证最后走出来的路 ...

  8. [bzoj2752]高速公路 题解(线段树)

    2752: [HAOI2012]高速公路(road) Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 2102  Solved: 887[Submit] ...

  9. iOS 如何计算UIWebView的ContentSize

    首选要等UIWebView加载内容后,然后在它的回调方法里将webview的高度Height设置足够小,就设置为1吧,因为这样才能用 sizeThatFits才能计算出webview得内容大小 - ( ...

  10. Linux的命名空间

    1. 为什么提供命名空间 命名空间是一种轻量级的虚拟化手段. 传统的虚拟化软件,是虚拟化多个不同的操作系统,对共享资源的限制很大. 通过提供命名空间,可以让进程与进程之间,用户与用户之间彼此看不到对方 ...