JS创建类和对象
来源:互联网 发布:软件质量管理体系流程 编辑:程序博客网 时间:2024/05/21 23:34
JavaScript 创建类/对象的几种方式
在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的。
JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表、字典、健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象。
一、由一对大括号括起来
var emptyObj = {};
var myObj =
{
'id': 1, //属性名用引号括起来,属性间由逗号隔开
'name': 'myName'
};
//var m = new myObj(); //不支持
不知你注意到对象都是用 var 声明的没有,像上面的代码,就只是简单的声明一个对象,它只有一份拷贝,你不能像实例化类对象一样对它采用new操作,像上面代码的注释部分。这样就极大的限制了对象的重用,除非你建立的对象只需要一份拷贝,否则考虑用其他方法建立对象。
下面一起看看如何访问对象的属性和方法。
var myObj =
{
'id': 1,
'fun': function() {
document.writeln(this.id + '-' + this.name);//以"对象.属性"方式访问
},
'name': 'myObj',
'fun1': function() {
document.writeln(this['id'] + '+' + this['name']);//以集合方式访问
}
};
myObj.fun();
myObj.fun1();
// 结果
// 1-myObj 1+myObj
二、用 function 关键字模拟 class
在 function 中用 this 引用当前对象,通过对属性的赋值来声明属性。如果用var声明变量,则该变量为局部变量,只允许在类定义中调用。
function myClass() {
this.id = 5;
this.name = 'myclass';
this.getName = function() {
return this.name;
}
}
var my = new myClass();
alert(my.id);
alert(my.getName());
// 结果
// 5
// myclass
三、在函数体中创建一个对象,声明其属性再返回
在函数体中创建对象可利用第一点的方法,或先 new Object(); 再为各属性赋值。
不过用这种方式创建的对象在VS2008 SP1中是没有智能提示的。
function myClass() {
var obj =
{
'id':2,
'name':'myclass'
};
return obj;
}
function _myClass() {
var obj = new Object();
obj.id = 1;
obj.name = '_myclass';
return obj;
}
var my = new myClass();
var _my = new _myClass();
alert(my.id);
alert(my.name);
alert(_my.id);
alert(_my.name);
// 结果
// 2
// myclass
// 1
// _myclass
一、定义类或对象
1.工厂方式
创建对象car
var oCar = new Object;
oCar.color = "red";
oCar.doors = 4;
oCar.mpg = 23;
oCar.showColor = function(){
alert(this.corlor);
};
创建多个car
function createCar(color, doors, mpg) {
var tempcar = new Object;
tempcar.color = color;
tempcar.doors = doors;
tempcar.mpg = mpg;
tempcar.showColor = function () {
alert(this.color)
};
return tempcar;
}
var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor(); //outputs "red"
car2.showColor(); //outputs "blue"
这个例子中,每次调用函数createCar(),都要创建新函数showColor(),意味着每个对象都有自己的showColor()版本,事实上,每个对象都共享了同一个函数。
有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避开这个问题。
function showColor(){
alert(this.color);
}
function createCar(color, doors, mpg) {
var tempcar = new Object;
tempcar.color = color;
tempcar.doors = doors;
tempcar.mpg = mpg;
tempcar.showColor = showColor;
return tempcar;
}
var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor(); //outputs "red"
car2.showColor(); //outputs "blue"
从功能上讲,这样解决了重复创建函数对象的问题,但该函数看起来不像对象的方法。所有这些问题引发了开发者定义的构造函数的出现。
2.构造函数方法
function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function () {
alert(this.color)
};
}
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
oCar1.showColor(); //outputs "red"
oCar2.showColor(); //outputs "blue"
就像工厂函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本。不过,也可以用外部函数重写构造函数,同样,这么做语义上无任何意义。
3.原型方式
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors= 4;
Car.prototype.mpg= 23;
Car.prototype.showColor = function(){
alert(this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();
它解决了前面两种方式存在的两个问题。但并不尽人意。首先,这个构造函数没有参数。使用原型方式时,不能通过构造函数传递参数初始化属性的值,这点很令人计厌,但还没完,真正的问题出现在属性指向的是对象,而不是函数时。考虑下面的例子:
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors= 4;
Car.prototype.mpg= 23;
Car.prototype.drivers = new Array("Mike","Sue");
Car.prototype.showColor = function(){
alert(this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();
oCar1.drivers.push("Matt");
alert(oCar1.drivers); //outputs "Mike,Sue,Matt"
alert(oCar2.drivers); //outputs "Mike,Sue,Matt"
4.混合的构造函数/原型方式
function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike", "Sue");
}
Car.prototype.showColor = function () {
alert(this.color);
};
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
oCar1.drivers.push("Matt");
alert(oCar1.drivers); //outputs "Mike,Sue,Matt"
alert(oCar2.drivers); //outputs "Mike,Sue"
现在就更像创建一般对象了。所有的非函数属性都有构造函数中创建,意味着又可用构造函数的参数赋予属性默认值了。因为只创建showColor()函数的一个实例,所以没有内存浪费。
5.动态原型方法
function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike", "Sue");
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function () {
alert(this.color);
};
Car._initialized = true;
}
}
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
oCar1.drivers.push("Matt");
alert(oCar1.drivers); //outputs "Mike,Sue,Matt"
alert(oCar2.drivers); //outputs "Mike,Sue"
动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。
6.混合工厂方式
这种方式通常是在不能应用前一种方式时的变通方法。它的目的是创建假构造函数,只返回另一种对象的新实例。
function Car() {
var tempcar = new Object;
tempcar.color = "red";
tempcar.doors = 4;
tempcar.mpg = 23;
tempcar.showColor = function () {
alert(this.color)
};
return tempcar;
}
与经典方式不同,这种方式使用new运算符,使它看起来像真正的构造函数。
7.采用哪种方式
如前所述,目前使用最广泛的是混合的构造函数/原型方式。些外,动态原型方法也很流行,在功能上与前者等价,可以采用这两种方式中的任何一种。
二、修改对象
1.创建新方法
可以用prototype属性为任何已有的类定义新方法,就像处理自己的类一样。
例:
Array.prototype.indexOf = function(vItem){
for(var i=0;i<this.length;i++){
if(vItem == this[i]){
return i;
}
}
retunr -1;
}
最后,如果想给ECMAScript中的每个本地对象添加新方法,必须在Object对象的prototype属性上定义它。
2.重定义已有方法
就像能给自己的类定义新方法一样,也可重定义已有的方法。函数名只是指向函数的指针,因此可以轻易地使它指向其他函数。
如
Function.prototype.toString = function(){
return "Function code hidden";
}
function sayHi(){
alert("hi");
}
alert(sayHi.toString()); //outputs "Function code hidden"
Class - 类创建
Class类实现了在JavaScript中声明一个新的类, 并通过构造函数实例化这个类的机制。通过使用Class.create()方法, 你实际上声明了一个新的类, 并定义了一个initialize()方法作为构造函数, 一旦你在这个声明的类的prototype中实现了改该方法, 你就可以使用new操作符来创建并实例化一个类。
Knowledge Prepare - 知识准备
在JavaScript中, 当你定义了一个新的函数, 你实际上声明了一个新的类, 而这个函数本身就相当于类的构造函数。 下面的代码向你展示了两种不同的方式来创建一个新的Person类, 而Person.prototype的定义也紧跟在函数定义之后。
var Person = function(name) { // 一个匿名函数, 并将这个函数赋值给一个Person变量, 此时Person成为一个类
this.name = name;
}
function Person(name) { // 直接定义一个叫做Person的函数表示Person类
this.name = name;
}
Person.prototype = { // 定义Person的prototype域
printName: function() { // 定义一个print函数
alert(this.name);
}
}
当你通过函数的方式声明了一个类之后, 你就可以通过new操作符来实例化这个类。这样, 你就可以调用类的成员函数来完成你的逻辑。
var person = new Person("Joe Smith"); // 使用new操作符来新建一个Person的实例, 并赋给变量person
person.printName(); // person就可以看作是一个实例的引用(reference), 所以可以通过这个引用来调用Person类中的成员函数
我们来总结一下创建一个新的类的实例的整个流程和步骤:
1. 通过定义一个函数的方式(匿名或者实名)来声明一个新的类.
2. 如果有必要, 定义这个新的类的prototype域.
3. 使用new操作符紧跟你所定义的函数来创建一个新的类的实例. 一旦JavaScript编译器碰到了new操作符, 它实际上创建了一个空的类实例变量.
4. 将所有这个类的prototype域中的属性与方法复制到这个新的实例中, 并将其成员函数中所有的this指针指向这个新创建的实例.
5. 接下来, 执行紧跟在new操作符后面的那个函数.
6. 当你执行这个函数时, 如果你试图对一个不存在的属性进行赋值, JavaScript编译器将自动为你在这个实例范围内新创建这个属性.
7. 函数执行完毕后, 将这个初始化完成的实例返回.
在Prototype中, 使用Class对象, 你可以以一个比较简单的方式来声明一个新的对象。通过使用Class.create(), prototype为你创建了一个默认的构造函数initialize(), 一旦你实现这一函数, 就可以以一个类似Java中构造函数的方式来创建一个新的类的实例。
Source View - 源码解析
var Class = { // 全局静态类, 用于声明一个新的类并提供构造函数支持
create: function() {
return function() { // 返回一个函数, 代表着这个新声明的类的构造函数
// 一个命名为initialize的函数将被这个类实现作为类的构造函数
this.initialize.apply(this, arguments);// initialize函数将在你实例化一个变量的时候被调用执行(即上面7个步骤中的第5步)
}
}
}
Field & Function Reference - 属性方法一览
Class ( 静态 )
Method / Property
Kind
Arguments
Description
create()
静态方法
/
用于声明一个新的类并提供了一个名为initialize构造函数支持
Analysis & Usage - 分析与使用
通过Class类, 你可以很容易地使用构造函数的方式创建一个新的类, 这对于Java程序员来说或许更加容易被接受。下面我们列出了Java和JavaScript各自声明和创建一个新的类的代码对比, 我们可以看到, 他们是如此相似:
var Person = Class.create(); // 类的声明 |public class Person { // 类的声明Person.prototype = { | private String name;
initialize: function(name) { // 构造函数 | public Person(String name){ // 构造函数
this.name = name; | this.name = name;
} | }
printName: function() { // 成员函数 | public void printName(){ // 成员函数
alert(this.name); | System.out.println(name);
} | }
} |}
var person = new Person("Joe Smith");// 创建实例 |Person person = new Person("Joe Smith");// 创建实例
person.printName(); // 函数调用 |person.printName(); // 函数调用
_______________来一段实例源码___________________________________________________________
var talent = {};
* 此段代码摘自网上,网址已经找不到了
*/
// 自执行的匿名函数创建一个上下文,避免引入全局变量
(function() {
// initializing变量用来标示当前是否处于类的创建阶段,
// - 在类的创建阶段是不能调用原型方法init的
// - 我们曾在本系列的第三篇文章中详细阐述了这个问题
// fnTest是一个正则表达式,可能的取值为(/\b_super\b/ 或 /.*/)
// - 对 /xyz/.test(function() { xyz; }) 的测试是为了检测浏览器是否支持test参数为函数的情况
// - 不过我对IE7.0,Chrome2.0,FF3.5进行了测试,此测试都返回true。
// - 所以我想这样对fnTest赋值大部分情况下也是对的:fnTest = /\b_super\b/;
var initializing = false, fnTest = /xyz/.test(function() {
xyz;
}) ? /\b_super\b/ : /.*/;
// 基类构造函数
// 这里的this是window,所以这整段代码就向外界开辟了一扇窗户 - window.Class
this.talent.Class = function() {
};
// 继承方法定义
talent.Class.extend = function(prop) {
// 这个地方很是迷惑人,还记得我在本系列的第二篇文章中提到的么
// - this具体指向什么不是定义时能决定的,而是要看此函数是怎么被调用的
// - 我们已经知道extend肯定是作为方法调用的,而不是作为构造函数
// - 所以这里this指向的不是Object,而是Function(即是Class),那么this.prototype就是父类的原型对象
// - 注意:_super指向父类的原型对象,我们会在后面的代码中多次碰见这个变量
var _super = this.prototype;
// 通过将子类的原型指向父类的一个实例对象来完成继承
// - 注意:this是基类构造函数(即是Class)
initializing = true;
var prototype = new this();
initializing = false;
// 我觉得这段代码是经过作者优化过的,所以读起来非常生硬,我会在后面详解
for (var name in prop) {
prototype[name] = typeof prop[name] == "function"
&& typeof _super[name] == "function"
&& fnTest.test(prop[name]) ? (function(name, fn) {
return function() {
var tmp = this._super;
this._super = _super[name];
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) : prop[name];
}
// 这个地方可以看出,Resig很会伪装哦
// - 使用一个同名的局部变量来覆盖全局变量,很是迷惑人
// - 如果你觉得拗口的话,完全可以使用另外一个名字,比如function F()来代替function Class()
// - 注意:这里的Class不是在最外层定义的那个基类构造函数
function Class() {
// 在类的实例化时,调用原型方法init
if (!initializing && this.init)
this.init.apply(this, arguments);
}
// 子类的prototype指向父类的实例(完成继承的关键)
Class.prototype = prototype;
// 修正constructor指向错误
Class.constructor = Class;
// 子类自动获取extend方法,arguments.callee指向当前正在执行的函数
Class.extend = arguments.callee;
return Class;
};
})();
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象
- JS创建类和对象(上)
- JS创建类和对象(标记)
- JS类和对象的创建
- 【转载】JS创建类和对象
- 爱分享:文件大师制作团队开发新品让文件无线穿越
- Uniyt3D shader 官网资料链接
- 《算法导论》 6.5优先级队列
- ios 翻页效果
- 关于DWZ中将数据库中数据导入Excel
- JS创建类和对象
- Android-ADB常用命令
- firefox 离线模式
- ndk环境配置
- Cglib实现动态代理原理
- repo sync同步Android 源代码下载到99%出错
- Android笔记--NDK/JNI Log 输出
- php中 json 转 array
- POJ 1679 The Unique MST 次小生成树