Javascript学习笔记8 用JSON做原型

代码如下:


代码如下:

<script type="text/javascript">
var People = {
name: "kym",
age: 21,
SayHello: function () {
alert("Hello,My name is " + this.name + ".I am " + this.age);
}
}
alert(People.name);
People.SayHello();
</script>

但是我们是不能重用这个对象的,我们如何把这个对象作为原型的呢?

首先,在一个JSON对象有一个构造方法是不可能的了,那么我们就做一个简单的“工厂”吧,写一个方法来专门负责创建。


代码如下:

<script type="text/javascript">
var People = {
Create: function (name, age) {
this.name = name;
this.age = age;
},
SayHello: function () {
alert("Hello,My name is " + this.name + ".I am " + this.age);
}
}
People.Create("kym", 21);
People.SayHello();
</script>

但是通过这个方法我们却发现,我们没有办法用People作为原型,让我们回顾一下:Javascript学习笔记7——原型链的原理 这篇文章,我们想一下这个过程:

var p=new People();==>p.__proto__=People.prototype。于是当我们p.SayHello()的时候就会去People.prototype中去找,结果什么都找不到。

如果可以People.prototype.SayHello=function(){}就可以解决这个问题。但是我们知道,只有function才可以有prototype。

那么我们想想之前的推导公式,怎么样能让p.SayHello()呢?如果可以p.__proto__=People就好了。那么我们想个办法:

既然在new的时候,某个对象的__proto__只能等于某个函数的prototype,我们设置一个函数X,令p.__proto__=X.prototype,我们再令X.prototype=People。这样的关系是这样:


代码如下:

<script type="text/javascript">
var People = {
Create: function (name, age) {
this.name = name;
this.age = age;
},
SayHello: function () {
alert("Hello,My name is " + this.name + ".I am " + this.age);
}
};

var X = function () { };
X.prototype = People;
var p = new X();
p.Create("kym", 21);
p.SayHello();
</script>

这样就相当于用X做了一个中间变量,使得我们可以访问JSON对象的内部属性。但是这样是不是不太优雅呢?我们每次创建一个对象时,都需要来写这样一个辅助的函数。那好,我们就把这个过程封装起来:


代码如下:

var Factory = {
CreatePeople : function (className,name,age) {
var temp = function () {
className.Create(name, age);
};
temp.prototype = className;
var result = new temp();
return result;
}
};
var people = Factory.CreatePeople(People,"kym",21);
people.SayHello();

但是这样也有一个缺点,就是每次我增加一个类,就需要向Factory里注册一个新方法,这样是很麻烦的,我在很久以前的 玩转方法:call和apply 中说过关于call和apply的区别,因为这里的参数不固定,我们不可能一一列举,因此我们在这里可以用apply来改善这个方法:


代码如下:

<script type="text/javascript">
var People = {
Create: function (name, age) {
this.name = name;
this.age = age;
},
SayHello: function () {
alert("Hello,My name is " + this.name + ".I am " + this.age);
}
};

var Factory = {
Create: function (className, params) {
var temp = function () {
className.Create.apply(this, params);
};
temp.prototype = className;
var result = new temp();
return result;
}
};
var people = Factory.Create(People,["kym",21]);
people.SayHello();
</script>

这样,一个完整的创建类就诞生了!那么我们每次创建“类”时就都可以用JSON来做了,然后用户每次都统一来调用Factory.Create()就可以了!

(0)

相关推荐

  • Javascript学习笔记8 用JSON做原型

    代码如下: 复制代码 代码如下: <script type="text/javascript"> var People = { name: "kym", age: 21, SayHello: function () { alert("Hello,My name is " + this.name + ".I am " + this.age); } } alert(People.name); People.SayHel

  • Javascript学习笔记之 对象篇(四) : for in 循环

    先上范例: // Poisoning Object.prototype Object.prototype.bar = 1; var foo = {moo: 2}; for(var i in foo) { console.log(i); // prints both bar and moo } 这里我们要注意两点,一是 for in 循环会忽略 enumerable 设置为 false 的属性.例如一个数组的 length 属性.第二是,由于 for in 会遍历整个原型链,所以当原型链过长时,会

  • JavaScript学习笔记之创建对象

    JavaScript 有Date.Array.String等这样的内置对象,功能强大使用简单,人见人爱,但在处理一些复杂的逻辑的时候,内置对象就很无力了,往往需要开发者自定义对象. 从JavaScript定义上讲对象是无序属性的集合,其属性可以包含基本值.对象或函数.也就是说对象是一组没有特定顺序的属性,每个属性会映射到一个值上,是一组键值对,值可以是数据或对象. 对象是JavaScript的基本数据类型.在JavaScript中除了字符串.数字.true.false.null和undefine

  • JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用

    如下所示: //实现枚举类型,扑克牌应用 function creatEnum(p){ //构造函数 var Enumeration = function(){throw 'can not Instantiate Enumerations';}; //重写原型并将原型赋值给变量proto var proto = Enumeration.prototype = { constructor:Enumeration, toString:function(){return this.name;}, va

  • Javascript学习笔记9 prototype封装继承

    好,那就让我们一步步打造,首先让我们来看下继承原本的写法: 复制代码 代码如下: <script> var Person = function(name, age) { this.name = name; this.age = age; } Person.prototype.SayHello = function () { alert(this.name + "," + this.age); }; var Programmer = function (name, age,

  • JavaScript学习笔记之数组去重

    推荐阅读:JavaScript学习笔记之数组的增.删.改.查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序 话说面试常会碰到面试官会问JavaScript实现数组去重的问题,最近刚好在学习有关于JavaScript数组相关的知识,趁此机会整理了一些有关于JavaScript数组去重的方法. 下面这些数组去重的方法是自己收集和整理的,如有不对希望指正文中不对之处. 双重循环去重 这个方法使用了两个for循环做遍历.整个思路是: 构建一个空数组用来存放去重后

  • JavaScript学习笔记(三):JavaScript也有入口Main函数

    在C和Java中,都有一个程序的入口函数或方法,即main函数或main方法.而在JavaScript中,程序是从JS源文件的头部开始运行的.但是某种意义上,我们仍然可以虚构出一个main函数来作为程序的起点,这样一来不仅可以跟其他语言统一了,而且说不定你会对JS有更深的理解. 1. 实际的入口 当把一个JavaScript文件交给JS引擎执行时,JS引擎就是从上到下逐条执行每条语句的,直到执行完所有代码. 2. 作用域链.全局作用域和全局对象 我们知道,JS中的每个函数在执行时都会产生一个新的

  • javascript学习笔记_浅谈基础语法,类型,变量

    基础语法.类型.变量 非数字值的判断方法:(因为Infinity和NaN他们不等于任何值,包括自身) 1.用x != x ,当x为NaN时才返回true; 2.用isNaN(x) ,当x为NaN或非数字值时,返回true; 3.用isFinity(x),在x不是NaN.Infinity.-Infinity时返回true; 虽然(字符串.数字.布尔值)不是对象,他们的属性是只读的,但也可以像操作对象一样来引用他们的属性和方法,原理: javascript构造一个(String.Number.Boo

  • JavaScript学习笔记整理_关于表达式和语句

    表达式和语句 eval( ) 只有一个参数 参数非字符串时,直接返回这个参数: 参数为字符串时,它把字符串当成JavaScript代码进行编译,编译失败则抛出语法错误,编译成功则执行代码,并返回最后一条语句的值,若没有值则返回undefined eval()使用了调用它的变量的作用域环境 它接收的字符串参数,在作为单独的代码时,必须是有语义的,否则编译失败 delete运算符:用来删除对象的自由属性.数组的元素, 删除属性后,属性将不存在,而删除数组元素后,会在数组内留下一个值为undefine

  • JavaScript学习笔记之数组随机排序

    推荐阅读:JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组的增.删.改.查 JavaScript中提供了sort()和reverse()方法对数组项重新排序.但很多时候这两个方法无法满足我们实际业务的需求,比如说扑克牌游戏中的随机洗牌. 在这篇文章一起来学习如何完成上面这个示例的效果,以及一些有关于数组随机排序的相关知识. 在网上查了一下有关于数组随机排序的相关资料,都看到了Math.random()的身影.打开浏览器控制器,输入: Math.random() 从图

随机推荐