JavaScript之四:自定义类型

转载 2013年12月02日 23:22:42

四,自定义类

1> 简单模式

var person = new Object ();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function(){
 alert(this.name);
};
person.sayName();

缺陷:

i>声明相同对象,需要大量重复代码

ii>无法记录类别信息。检测出还是Object类型。


2> 工厂模式

function createPerson(name, age, job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function(){
    alert(this.name);
  };
  return o;
}
var person = createPerson("Nicholas", 29, "Software Engineer");
person.sayName();

优势:封装了重复代码。

缺陷:仍然无法记录类别信息。检测出还是Object类型。


3> 构造函数模式

function Person(name, age, job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function(){
    alert(this.name);
  };
}
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName();
优势:可通过instanceof方法,获得类型信息,是Person类型。

Why:因为当使用new关键字调用函数时,JavaScript会做一些额外的事。后面再讲。

缺陷:类的方法,其实也是对象,在调用构造函数时,会被重复实例化,类的实例无法共用方法,造成浪费。


4> 原型模式

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
  alert(this.name);
};
优势:可获得类型信息。用此方法生成的对象,可共享属性和方法。

Why:

当定义函数时,JavaScritp会做一些额外的事,就是为函数添加一个名为prototype的属性,它是一个指针,指向一个新的对象,我们将其叫做原型对象。

当在Person中添加属性和方法时,实际上都添加到了这个新的原型对象中。并且这个新对象会拥有一个constructor的属性,反指向该构造函数。

当使用new调用函数时,实际上,JavaScript会在返回的新对象中,添加一个名为_proto_的属性,指向了该函数的原型对象。

当调用一个对象的属性和方法时,会先查看对象本身是否有该属性和方法,如果有,则调用。如果没有,则会找到该对象的_proto_属性所指的原型对象,查看原型对象是否有要调用属性和方法。依次类推。

(当调用instanceof方法时,会试图从自身查找constructor属性,但没有,就会上溯查找_proto_属性所指的原型对象,如果有constructor属性,则返回,这也是为什么上述构造函数模式可以记录类别信息的原因)

因此,用原型模式定义类,实例化出的对象,会共享属性和方法。

缺陷:虽然可共享,但当有属性是引用型对象时,会造成实例之间同时操作一个引用对象,造成混淆。


5> 构造函数和原型的组合模式

function Person(name, age, job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ["Shelby", "Court"];
}
Person.prototype = {
  constructor : Person,
  sayName : function(){
    alert(this.name);
  }
}
优势:由于我们只是想在对象间共享方法,因此,在构造函数的基础上,将方法的定义改用原型模式定义即可。

覆盖:

当调用对象的方法或属性时,实际上就是先搜索自身,如果搜索不到,才会通过_proto_属性到原型对象中搜索。因此,一旦对象也定义了同名的方法或属性,则会覆盖到原型对象中的方法和属性。对象可通过delete操作符,将对象自己的方法和属性删除,取消覆盖。

判断:

有时需要判断一个属性和方法是否是自身的,还是原型对象的。可调用对象的hasOwnProperty(),如果这个属性是对象自身的,则返回true。

而使用in操作符,只要有这个属性,无论从自身来,还是从原型对象来,都回返回true。

因此可结合使用,来判断属性和方法是否来自原型对象 (name in object) && ! object.hasOwnProperty(name)。


6> 动态原型模式

function Person(name, age, job){
  this.name = name;
  this.age = age;
  this.job = job;
  if (typeof this.sayName != "function"){
    Person.prototype.sayName = function(){
      alert(this.name);
    };
  }
}
优势:封装性

7> 寄生构造函数模式

function Person(name, age, job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function(){
    alert(this.name);
  };
  return o;
}
优势:适合对已有类进行功能扩展。

缺陷:无法检测类型。


8>稳妥构造函数模式

function Person(name, age, job){
  var o = new Object();
  o.sayName = function(){
    alert(name);
  }
  return o;
}
优势:可创建稳妥对象,所谓稳妥对象,就是没有公共属性,并且其方法也不引用this的对象。适合安全环境(这些环境禁用this和new)。

缺陷:无法检测类型。

百度前端学院任务四:基础JavaScript练习(一)

如图 实现的功能: 模拟一个队列,队列的每个元素是一个数字,初始队列为空 有一个input输入框,以及4个操作按钮 点击"左侧入",将input中输入的数字从左侧插入队列中;点...
  • Jade_feng
  • Jade_feng
  • 2017年03月26日 18:47
  • 219

JS toFixed 四舍六入五成双

以前一直以为toFixed就是四舍五入的方法,后来又有一段时间以为toFixed是五舍六入。今天终于写的时候,终于才知道toFixed是一个叫做四舍六入无成双的诡异的方法。。。 完全不明白为什么要这么...
  • zeyu1021
  • zeyu1021
  • 2015年04月09日 12:27
  • 1172

JS保留小数点(四舍五入、四舍六入)实例

floatDecimal.html //保留两位小数 //功能:将浮点数四...
  • qiaoshuai0920
  • qiaoshuai0920
  • 2013年04月24日 17:59
  • 1446

JavaScript拥有动态类型

JavaScript拥有动态类型。这意味着相同的变量可用作不同的类型: 实例: 1 2 3 "font-size:18px;">var x //x为...
  • qq_26222859
  • qq_26222859
  • 2016年03月20日 16:32
  • 1138

浅谈JavaScript模拟事件和自定义事件

1、DOM中的事件模拟 1) DOM中的事件模拟有以下3个步骤: 步骤1:创建事件对象event 可以在document对象上使用createEvent()方法创建event对象,此方法接收一个参数,...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月24日 23:02
  • 926

【JavaScript】类型转换

前天面试,面试官问到了一个超级简单的题目:“true==3”返回什么?我不假思索,脱口而出,true!,因为存在隐式类型转换,会把3转换为true,所以最后返回true。欧买嘎,我说的还特别理直气壮。...
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016年08月11日 12:37
  • 1399

javaScript中的自定义类型和继承

在此只记录ECMAScript中广泛使用的认同度最高的创建自定义类型方式:组合使用构造函数模式和原型模式; 和通用的继承方式:组合继承(借用构造函数继承和原型继承的组合); 1、创建自定义类型:  ...
  • JQuery_QQ
  • JQuery_QQ
  • 2016年04月09日 22:01
  • 271

JavaScript基本类型和引用类型的值

JS变量可能包含两种不同数据类型的值;基本类型值和引用类型值。基本类型指的是简单的数据段,而引用类型值那些由多个值构成的对象; 在将一个值赋给变量时,解析器必须确定这个值是基本类型值还是引用类型值。J...
  • liaodehong
  • liaodehong
  • 2015年11月01日 21:35
  • 2395

跟我学《JavaScript高程3》,开讲啦……

他们都推荐讲一讲《JavaScript高级程序设计第三版》,这本书特别厚,群里的同学也提了很多次,自学很难坚持看完。所以,接下来将按照这本书的目录结构,依次录制一整套视频教程,用最贴近初学者的方式,与...
  • guxing820
  • guxing820
  • 2016年05月25日 01:44
  • 1186

JavaScript函数中的参数类型

JavaScript是一种弱类型语言,由于声明形参无须定义数据类型,所以导致调用这些函数时可能出现问题。 比如: function changeAge(p){ p.setAge(20); ...
  • u012868077
  • u012868077
  • 2016年06月05日 10:03
  • 3756
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript之四:自定义类型
举报原因:
原因补充:

(最多只允许输入30个字)