1 直接创建对象

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <script type="text/javascript"> /**
* 在js中并不存在类,所以可以直接通过Object来创建
* 但是使用如下方式创建,带来最大的问题:由于没有类的约束
* 无法实现对象的重复利用,并且没有一种约束,在操作时会带来问题
*/
var person = new Object();
person.name = "Leon";
person.age = 33;
person.say = function(){
console.info(this.name + " , " + this.age);
}
</script> </head>
<body> </body>
</html>

2  使用json的方式创建对象

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <script type="text/javascript"> /**
* json的意思就是javascript simple object notation
* json就是js的对象,但是他省去了xml中便签,而是通过{}来完成对象的说明
*/
var person = {
name : "张三",
age :23 ,
say : function(){
console.info(this.name + " , " + this.age);
}
}
person.say(); /**
* 通过json依然可以创建对象数组,创建的方式饿js的数组一样
*/
var ps = [
{
name : "Leon",
age : 22
},{
name : "Ada",
age : 33
}
];
for(var i = 0 ; i < ps.length ; i ++){
console.info(ps[i].name);
} /**
* 创建一组用户,用户的属性有
* name : string
* age : int
* friends : array
* List<Person> ps = new ArrayList<Person>();
* ps.add(new Person("Leon" , 22 , ["Ada","Alice"]));
* ps.add(new Person("John" , 33 , ["Ada","Chris"]));
* 把ps转换为json
*/
ps = [
{
name : "Leon",
age : 22,
friends:["Ada" , "Alice"]
},{
name : "John",
age : 33,
friends : ["Ada","Chris"]
}
]; </script> </head>
<body> </body>
</html>

3  使用工厂方式创建

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <script type="text/javascript"> /**
* 通过工厂的方式来创建Person对象
* 在createPerson中创建一个对象
* 然后为这个对象设置相应的属性和方法
* 之后返回这个对象
*/
function createPerson( name , age ){
var o = new Object();
o.name = name ;
o.age = age ;
o.say = function(){
console.info(this.name + " , " + this.age);
}
return o ;
}
/**
* 使用工厂的方式,虽然有效的解决了类的问题,
* 但是依然存在另外一个问题:无法获取对象的数据类型,即:
* 通过p1 instanceof ? 无法获取对象p1 和p2 的数据类型,
* 通过typeof仅仅只能检测出object类型,如果希望使用instanceof来检测的话,无法确定检测的类型
* 解决方式:使用构造函数的方式解决问题
*/
var p1 = createPerson("Leon" , 22);
var p2 = createPerson("Ada" , 33);
p1.say();
p2.say();
console.info(p1 + " " + p1 instanceof ? ); </script> </head>
<body> </body>
</html>

4 使用构造器创建

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <script type="text/javascript"> /**
* 通过构造函数的方式创建,和基于工厂的创建类似
* 最大的区别就是函数的名称就是类的名称,按照java的约定,第一个字母大写。
* 使用构造函数创建时,在函数内部是通过this关键字来完成属性的定义
*/
function Person(name , age){
this.name = name;
this.age = age ;
//以下方式带来的问题就是所有的对象都会为该行为分配控件
this.say = function(){
console.info(this.name + " , " + this.age);
}
} //通过new Person来创建对象
var p1 = new Person("Jhon" , 22);
var p2 = new Person("Ada" , 32);
p1.say(); //Jhon , 22
p2.say(); //Ada , 32
//使用构造函数的方式可以通过以下方恨死来检测对象的类型
console.info( p1 instanceof Person) ;//true /**
* 使用构造函数穿件带来的问题
* 在java中:
* class Person{
* int id ;
* String name ;
* public void say(){
*
* }
* }
* Person p1 = new Person();
* Person p2 = new Person();
* person的say方法里面的变量在栈中分配,在调用say方式的时候才分配空间,
* 而内存堆中只会存放id和name,不管创建多少个Person对象,say方法只会调用一块空间,在调用的时候才创建,
* 所有say是不占用空间的
*
* 在js中使用构造函数:
* 带来的问题就是每一个对象中都会存放一个方法的拷贝,如果对象的行为很多的话,
* 控件的占用率就会大大增加,即每创建一个person对象就分配一个say空间
*
* 解决方法:
* 可以将函数放到全局变量中定义,这样就可以让所有的类中的行为指向同一个函数
*/
console.info(p1.say == p2.say); //false //以下内容为解决方法: function Person2(name , age){
this.name = name;
this.age = age ;
this.say = say;
}
/**
* 将行为设置为全局的行为,如果将所有的方法都设计为全局函数的时候,
* 这个函数就可以被window调用,此时就破坏了对象了封装性,
* 而且如果某个对象有大量的方法,就会导致整个代码充斥着大量的全局函数
* 这样将不利于开发
*/
function say(){
console.info(this.name + " , " + this.age);
} var p1 = new Person2("Jhon" , 22);
var p2 = new Person2("Ada" , 32);
p1.say(); //Jhon , 22
p2.say(); //Ada , 32
console.info(p1.say == p2.say); // true </script> </head>
<body> </body>
</html>

js 中使用工厂方法和构造器方法的更多相关文章

  1. js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...

  2. js中数组去重的几种方法

    js中数组去重的几种方法         1.遍历数组,一一比较,比较到相同的就删除后面的                 function unique(arr){                 ...

  3. JS 中深拷贝的几种实现方法

    JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...

  4. js中的splice方法和slice方法简单总结

    slice:是截取用的 splice:是做删除 插入 替换用的 slice(start,end): 参数: start:开始位置的索引 end:结束位置的索引(但不包含该索引位置的元素) 例如: va ...

  5. js中判断数据类型的四种方法总结

    js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...

  6. js中this的四种使用方法

    0x00:js中this的四种调用模式 1,方法调用模式 2,函数调用模式 3,构造器调用模式 4,apply.call.bind调用模式 0x01:第一种:方法调用模式 (也就是用.调用的)this ...

  7. Js中数据类型判断的几种方法

    判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...

  8. js中判断鼠标滚轮方向的方法

      前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...

  9. 用Java开发一个工具类,提供似于js中eval函数功能的eval方法

    今天在看到<Java疯狂讲义>中一个章节习题: 开发一个工具类,该工具类提供一个eval()方法,实现JavaScript中eval()函数的功能--可以动态运行一行或多行程序代码.例如: ...

随机推荐

  1. hdu 3032(博弈sg函数)

    题意:与原来基本的尼姆博弈不同的是,可以将一堆石子分成两堆石子也算一步操作,其它的都是一样的. 分析:由于石子的堆数和每一堆石子的数量都很大,所以肯定不能用搜索去求sg函数,现在我们只能通过找规律的办 ...

  2. MultiMap

    类关系 ArrayListMultiMap.java Multimap <I> | | AbstractMultimap <A> Serializable <I> ...

  3. Java并发编程-synchronized

    多线程的同步机制对资源进行加锁,使得在同一个时间,只有一个线程可以进行操作,同步用以解决多个线程同时访问时可能出现的问题.同步机制可以使用synchronized关键字实现.synchronized关 ...

  4. Drupal如何处理系统变量?

    Drupal的系统变量都保存在数据库variable表中: 然后,开发人员可以通过下面的API函数操作这些系统变量: function variable_get($name, $default = N ...

  5. Linux目录初识

    / 根目录 /bin 存放必要的命令 /boot 存放内核以及启动所需的文件/dev 存放设备文件 /etc 存放系统配置文件 /home 普通用户的宿主目录,用户数据存放在其主目录中 /lib 存放 ...

  6. JS 实现 ResizeBar,可拖动改变两个区域(带iframe)大小

    将网页化成两个区域,左边区域是一个树结构,右边区域是一个iframe,点击左边区域时,右边区域加载页面.实现功能:在两个区域间加一个可拖动条,拖动时改变左右两个区域的大小.在Google上搜索slid ...

  7. PHP 解压zip文件的函数封装

    /** * zip文件解压 * * @param $zipFilePath zip文件的路径,可以不加zip文件后缀.如果其他类型的文件伪装成zip解压也会失败 * @param $directory ...

  8. C++ 串

    ♣ string 的基类basic_string中没有虚函数,它无意成为基类.更像是为了处理字符相关的问题而专门提供的一个工具及操作方法.如:想要在一个字符串str1中查找str2,没必要每次都去写K ...

  9. 闲置小U盘变身最强大路由器

    小容量 U 盘,用起来嫌容量太少,丢了好像又觉得太可惜.不过现在将它进行一番小改造后,配合我们的电脑 ,就能得到一台强大的路由器,不仅省了买路由的钱,而且这台路由器在市面上基本买不到 !     DD ...

  10. linux c 多线程编程

    linux 下 c 语言多线程: /* 06.3.6 Mhello1.c Hello,world -- Multile Thread */ #include<stdio.h> #inclu ...