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, salary) {
Person.call(this, name, age);
this.salary = salary;
};
Programmer.prototype = new Person();
var pro = new Programmer("kym", 21, 500);
pro.SayHello();
</script>

我们看到,在实际上,继承的根本就在于这一步Programmer.prototype=new Person()。也就是说把Person加到原型链上。这一点在Javascript学习笔记7——原型链的原理 已经有过比较详尽的解释。
那也就是说,我们实现的关键就在于原型链的打造。
在上文中,我们用JSON来打造了一个原型,其原型链是p.__proto__=Person。那么我们希望在这个上封装继承,那么原型链应该是p.__proto__.__proto__=SuperClass,也就是说Person.__proto__=SuperClass。但是按照我们上面代码的继承方法,原型链关系是Person.__proto__=SuperClass.prototype。
这个和我们在上文中一样,我们的办法就是借助一个辅助函数,将原来的函数内的属性赋给X,然后令X.prototype=SuperClass即可,也就是说我们将子原型进行一个封装。
好,就按照这个思路,我们来实现利用原型链的继承关系的封装。

复制代码 代码如下:

<script>
var Factory = {
Create: function (className, params) {
var temp = function () {
className.Create.apply(this, params);
};
temp.prototype = className;
var result = new temp();
return result;
},
CreateBaseClass: function (baseClass, subClass) {
var temp = function () {
for (var member in subClass) {
this[member] = subClass[member];
}
};
temp.prototype = baseClass;
return new temp();
}
};
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 Temp = {
Create: function (name, age, salary) {
People.Create.call(this, name, age);
this.salary = salary;
},
Introduce: function () {
alert(this.name + "$" + this.age + "$" + this.salary);
}
};
var Programmer = Factory.CreateBaseClass(People, Temp);
var pro = Factory.Create(Programmer, ["kym", 21, 500]);
pro.SayHello();
</script>

这样就完成了我们对继承关系的封装。当然,我们也可以不单独写一个变量:

复制代码 代码如下:

var Programmer = Factory.CreateBaseClass(People,
{
Create: function (name, age, salary) {
People.Create.call(this, name, age);
this.salary = salary;
},
Introduce: function () {
alert(this.name + "$" + this.age + "$" + this.salary);
}
});

当然,这全凭个人爱好了,个人认为第一种办法相对更清晰一些,但是第二种办法则更优雅。

时间: 2024-08-31 05:22:27

Javascript学习笔记9 prototype封装继承_基础知识的相关文章

javascript学习笔记(十) js对象 继承_基础知识

1.原型链 //很少单独使用 复制代码 代码如下: View Code //定义 SuperClass类,有一个属性property和一个方法getSuperValue function SuperClass() { this.property = true; } SuperClass.prototype.getSuperValue = function() { return this.property; } //定义SubClass类,有一个属性subproperty和后来添加的一个方法get

JavaScript学习笔记整理_setTimeout的应用_基础知识

setTimeou的t应用 var ids = []; function foo1(i) { this.i = i; console.log('i = '+i); ids[0] = setTimeout((function () { foo1(i); }),1000); } function foo2(j) { this.j = j; console.log('j = '+j); ids[1] = setTimeout((function () { foo2(j); }),1000); } fo

javascript学习笔记(九) js对象 设计模式_基础知识

1.创建对象 复制代码 代码如下: var person = new Object(); person.name = "RuiLiang"; person.age = 30; person.job = "Teacher"; person.sayName = function () { alert(this.name); }; person.sayName(); 2.工厂模式 缺点:不能识别对象 复制代码 代码如下: function createPerson(nam

JavaScript学习笔记记录我的旅程_基础知识

1.什么是JavaScript? (1) HTML只是描述网页长相的标记语言,没有计算,判断能力,如果所有计算,判断(比如判断文本框是否为空,判断两次密码是否输入一致)店铺放到服务器端执行的话网页的页面会非常的慢,用起来也很难用,对服务器的压力也很大,因此要求能在浏览器中执行一些简单的运算,判断,JavaScript就是一种在浏览器端执行的语言. (2) JavaScript和Java没有直接的关系,唯一的关系就是JavaScript原名LiveScript,后来吸取了Java的一些特性,升级为

javascript学习笔记(五)正则表达式_基础知识

常用到的元字符有: •. 查找单个字符,除了换行和行结束符: •\w 匹配字母.汉字.数字.下划线等符号: •\s 匹配空白符(包含空格.制表符等): •\d 匹配数字: •\b 匹配位于单词的开头或结尾的匹配: 常用的量词有: •^n 匹配任何开头为 n 的字符串: •n$ 匹配任何结尾为 n 的字符串: •n+ 匹配任何包含至少一个 n 的字符串: •n* 匹配任何包含零个或多个 n 的字符串: •n? 匹配任何包含零个或一个 n 的字符串: •n{X} 匹配包含 X 个 n 的序列的字符串

JavaScript学习笔记之JS事件对象_基础知识

事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等: event对象只在事件发生的过程中才有效. firefox里的event跟IE里的不同,IE里的是全局变量,随时可用:firefox里的要用参数引导才能用,是运行时的临时变量. 在IE/Opera中是window.event,在Firefox中是event: 而事件的对象,在

JavaScript 学习笔记之变量及其作用域_基础知识

一.变量 ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符. 定义:var firstDemo; 二.变量的作用域 2.1基本概念 使用var 定义变量:定义该变量的作用域的局部变量,这种定义变量的方法也被成为显式声明. 这么说不理解的话可以看看下面这个简单粗暴的例子: 复制代码 代码如下: test(); function test(){ var firstDemo="hello";//定义局部变量    

javascript学习笔记(八)正则表达式_基础知识

基本概念 正则表达式是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符").模式描述在搜索文本时要匹配的一个或多个字符串. 首先推荐几个正则表达式编辑器  Debuggex :https://www.debuggex.com/  PyRegex:http://www.pyregex.com/  Regexper:http://www.regexper.com/ 正则表达式是一种查找以及字符串替换操作.正则表达式在文本编辑器中广泛使用,比如正则表达式被用

javascript学习笔记(七) js函数介绍_基础知识

1.函数内部属性 arguments arguments用来保存函数的参数,arguments.callee指向拥有arguments对象的函数 复制代码 代码如下: //阶乘 function factorial(num) { if (num <= 1) { return 1; } else { return num*arguments.callee(num-1); //用agreements.callee代替 } } var trueFactorial = factorial; factor