软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Ajax/JavaScript > JS创建自定义对象的几种常见方式与比较

JS创建自定义对象的几种常见方式与比较

初学JavaScript,正在读 Nicholas C. Zakas 的《JavaScript高级程序设计》,看到了创建对象,简单的对书中内容做了一下总结!

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//1.创建Object,为其添加属性方法
var person = new Object();
person.name = "Nicholas";
person.age = 29;
personal.job = "Software Engineer";

personal.sayName = function () {
alert(this.name);
};

/*
缺点:使用一个接口创建很多对象,会产生大量重复代码
*/

//2.工厂模式
function createPersonal(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function () {
alert(this.name);
};
return o;
}

/*
工厂模式解决了对象相似问题,却没有解决对象识别问题(怎样知道一个对象的类型)
*/

//3.构造函数模式
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function () {
alert(this.name);
};
}

/*
构造函数模式没有显式的创建对象,直接将方法和属性赋给了this对象,没有return语句
要创建Person的新实例,必须使用new操作符,实际经历4个步骤
a.创建一个新对象
b.将构造函数的作用域赋给新对象(this指向这个新对象)
c.执行构造函数,为新对象添加属性
d.返回新对象
构造函数模式创建的对象可以识别其类型,但每个方法都要在每个实例上重建一遍
*/

//创建两个实例,创建两个相同的方法没必要,可以把函数定义转到方法外部
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}

function sayName() {
alert(this.name);
}

/*
这样解决了两个方法做同一件事的的问题,但在全局作用域上定义的函数只能被某个对象调用,如果对象定义需要很多方,就要定义很多全局函数,自定义的引用类型就没有封装 性了
*/

//4.原型模式
function Person() {
}

Person.prototype.name = "Nocholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
alert(this.name);
}

/*
原型模式所有参数默认取得相同的值,属性若为引用类型,多个实例之间互相影响
*/

//5.构造函数原型混合模式
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
}

Person.prototype.sayName = function () {
alert(this.name);
}

/*
构造函数用于定义实例属性,原型用于定义方法和共享属性,。eigenvalue实例都会有一份自己实例属性的副本,

同时享用着对共享方法的引用,目前来看几乎是最合适的创建对象方式了 */

</script>
</body>
</html>
    相关阅读
    网友评论
    栏目导航
    推荐软件