JavaScript继承学习笔记
JavaScript作为一个面向对象语言(JS是基于对象的),可以实现继承是必不可少的,但是由于本身并没有类的概念,所以不会像真正的面向对象编程语言通过类实现继承,但可以通过其他方法实现继承。(javascript中的继承是通过原型链来体现的http://www.cnblogs.com/amumustyle/p/5435653.html)实现继承的方法很多,下面就只是其中的几种。
一.原型链继承
function Person() { //被继承的函数叫做超类型(父类,基类)
this.name='mumu';
this.age='18';
}
Person.prototype.name='susu';//当属性名相同时需就近原则,先在实例里面查找,没找到再到原型里找
function Worker(){ //继承的函数叫做子类型(子类,派生类)
this.job='student';
}
Worker.prototype=new Person();//通过原型链继承,超类型实例化后的对象实例,赋值给子类的原型属性
var p2=new Worker();
console.log(p2.name);
console.log(p2 instanceof Object);//ture 所有的构造函数都继承自Object
以上实现继承关键在于:Worker.prototype=new Person(); 将Worker的原型成为Person的一个实例,通过原型链继承。
注意:在使用原型链实现继承时,不能使用对象字面量创建原型方法,因为这样会中断关系而重写原型链。
原型链继承问题:
1.出现引用共享问题,他们还是共用一个空间,子类会影响父类
function Person() {
this.bodys=['eye','foot'];
}
function Worker(){
}
Worker.prototype=new Person();
var p1=new Worker();
p1.bodys.push('hand');
var p2=new Worker();
console.log(p1.bodys);
console.log(p2.bodys);

2.在创建子类型的实例时,不能像超类型的构造函数中传递参数。
那么如何解决原型链的两个问题呢?那就继续看下面的继承方式吧~
二.借用构造函数继承(也叫对象冒充,伪造对象或经典继承)
function Person(name,age){
this.name=name;
this.age=age;
this.bodys=['eye','foot'];
}
Person.prototype.showName=function(){
console.log(this.name);
}
function Worker(name,age,job){
Person.call(this,name,age);
this.job=job;//子类添加属性
}
var p1=new Worker('mumu','18','学生');
p1.bodys.push('hand') ;
var p2=new Worker();
console.log(p1.name);
console.log(p2.bodys);
console.log(p1.showName());

简单分析下以上使用借用构造函数的原理:Person.call(this,name,age);这句代码调用父级构造函数,继承父级属性,使用call方法调用Person构造函数改变函数执行时候的this, 这里的this-> new出来的一个Worker对象 构造函数伪装方法:把Worker传给上面的Person。
当引用类型放在构造函数里面的时候就不会被共享,所以p2不受影响。
这里借用构造函数继承方式就解决了原型链不能传递参数以及引用类型共享的问题。
小知识:call()和apply()方法可以改变函数执行的作用域, 简言之就是改变函数中this指向的内容。
call()和apply()都接受两个参数:第一个是在其中运行函数的作用域,另一个是传递的参数。
call和apply的区别就是参数的不同.
call中的参数必须是一个个枚举出来的.
apply中的参数必须是数组或者是arguments对象
那么问题来了:为什么p1.showName()结果是错误的呢?----因为借用构造函数继承方式只能继承构造函数里的属性和方法。这里也就发现了借用构造函数的一个问题。
注意:由于把方法都放在构造函数里,每次我们实例化就会分配内存空间给它造成资源的浪费,所以一般我们都是把方法放在原型里,属性放在构造函数里。
借用构造函数继承问题:
因为借用构造函数只能继承构造函数里的属性和方法,在超类型的原型中定义的方法对子类而言是不可见的,所以就相当于没有了原型。结果所有的方法都只能在构造函数里定义,因此就没有函数复用了。
那么如何解决借用构造函数所产生的问题呢?那就要看下面这种继承方式了
三.组合继承(伪经典继承)
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function(){
console.log(this.name);
}
function Worker(name,age,job){
Person.call(this,name,age);//借用构造函数
this.job=job;
}
Worker.prototype=new Person();//原型链继承
var p1=new Worker('mumu','18','学生');
console.log(p1.age);
p1.showName();
组合继承:将原型链与借用构造函数结合。
思路:通过使用原型链实现原型上的属性和方法继承,借用构造函数实现实例属性的继承
以上的例子Person.call(this,name,age);借用构造函数继承了属性
Worker.prototype=new Person();原型链继承了方法 , 避免了两者的缺点,融合了它们的优点,成为最常用的继承模式。
组合继承的问题:
调用两次超类型构造函数,一次是在创建子类型原型时,另一次是在子类型的构造函数内部。
要解决这个问题就要用到寄生组合式继承方式了。
四.原型式继承
function object(proto) {
function F() {}
F.prototype = proto;
return new F();
}
var person = {
name: 'mumu',
friends: ['xiaxia', 'susu']
};
var anotherPerson = object(person);
anotherPerson.friends.push('wen');
var yetAnotherPerson = object(person);
anotherPerson.friends.push('tian');
console.log(person.friends);//["xiaxia", "susu", "wen", "tian"]
console.log(anotherPerson.__proto__)//Object {name: "mumu", friends: Array[4]}
简单分析下:function object(proto)是一个临时中转函数,里面的参数proto表示将要传递进入的一个对象,F()构造函数是临时新建的对象,用来存储传递过来的对象,F.prototype = proto;将对象实例赋值给F构造函数的原型对象,最后返回传递过来的对象的对象实例。原型式继承还是会共享引用类型的属性。
五.寄生式继承
//临时中转函数
function object(proto) {
function F() {}
F.prototype = proto;
return new F();
} //寄生函数
function create(proto){
var f=object(proto);
f.love=function(){
return this.name;
}
return f;
} var person = {
name: 'mumu',
friends: ['xiaxia', 'susu']
}; var anotherPerson = create(person);
23 console.log(anotherPerson.love());寄生组合式继承
六.寄生组合式继承
function object(proto) {
function F() {}
F.prototype = proto;
return new F();
}
//寄生函数
function create(Person,Worker){
var f=object(Person.prototype);//创建对象
f.constructor=Worker;//调整原型构造指针,增强对象
Worker.prototype=f;//指定对象
}
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function(){
console.log(this.name);
}
function Worker(name,age,job){
Person.call(this,name,age);
this.job=job;
}
create(Person,Worker);//寄生组合式继承
var p1=new Person('mumu','18','学生');
p1.showName();
这种方法也是现在实现继承方法中最完美的,也是最理想的。
JavaScript继承学习笔记的更多相关文章
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- JavaScript正则表达式学习笔记(二) - 打怪升级
本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...
- javascript正则表达式 - 学习笔记
JavaScript 正则表达式 学习笔记 标签(空格分隔): 基础 JavaScript 正则表达式是用于匹配字符串中字符组合的模式.在javascript中,正则表达式也是对象.这些模式被用于Re ...
- JavaScript简易学习笔记
学习地址:http://www.w3school.com.cn/js/index.asp 文字版: https://github.com/songzhenhua/github/blob/master/ ...
- javaScript 对象学习笔记
javaScript 对象学习笔记 关于对象,这对我们软件工程到学生来说是不陌生的. 因为这个内容是在过年学到,事儿多,断断续续,总感觉有一丝不顺畅,但总结还是要写一下的 JavaScript 对象 ...
- 【转载】Javascript原型继承-学习笔记
阮一峰这篇文章写的很好 http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javas ...
- 【MarkMark学习笔记学习笔记】javascript/js 学习笔记
1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...
- Javascript MVC 学习笔记(一) 模型和数据
写在前面 近期在看<MVC的Javascript富应用开发>一书.本来是抱着一口气读完的想法去看的.结果才看了一点就傻眼了:太多不懂的地方了. 仅仅好看一点查一点,一点一点往下看吧,进度虽 ...
- Javascript作用域学习笔记(三)
看完<你不知道的javascript>上,对作用域的新的理解(2018-9-25更) 一.学习笔记: 1.javascript中的作用域和作用域链 + 每个函数在被调用时都会创建一个 ...
随机推荐
- 鸟哥笔记:postfix的一些重要配置文件
postfix的一些主要配置文件都放在/etc/postfix/目录下,其中几个重要的配置文件有main.cf.master.cgf.access和aliases文件. /etc/postfic/ma ...
- Windows和Linux下Mysql 重置root 密码
Windows系统下一:进入Windows窗口cmd命令行下,停止mysql服务: net stop mysql二:进入mysql的安装目录下,进去bin目录mysqld-nt.exe --skip- ...
- PeopleSoft Object Types Definitions
PeopleSoft stores object definitions types such as Record, Field and SQL definitions as numbers in ...
- 关于SQL表联接
以SQL2008为例,Microsoft SQL Server 2008支持四种表运算符-JOIN,APPLY,PIVOT,UNPIVOT.JOIN表运算符是ANSI标准,而其他三种是T-SQL对标准 ...
- zend studio导入thinkphp的乱码问题
刚刚导入thinkphp有乱码还有错误怎么办? windows -> preference -> Work space -> text file encodeing设置为 UTF-8 ...
- postgresql 入门(含java、scala连接代码)
1.下载安装包 官网:http://www.postgresql.org/download/ 按自己需求,下载安装包, 我下载的windows版32位的.http://get.enterprisedb ...
- php的register_shutdown_function函数详解
function shutdown() { $last_error = error_get_last(); if ($last_error) { error_log(print_r($last_err ...
- HTTP协议中PUT/GET/POST/HEAD等介绍
HTTP协议中GET.POST和HEAD的介绍 GET: 请求指定的页面信息,并返回实体主体. HEAD: 只请求页面的首部. POST: 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体 ...
- ORMLiteDatabase的简单使用并且与其他的表相互联系
1.下载jar 具体到Android,需要在 http://ormlite.com/releases 页面下载两个jar 包(本文基于ORMLite的版本是:ormlite 4.49-SNAPSHOT ...
- DataTable使用总结
1.DataTable数据去重 static void Main(string[] args) { DataTable dt = new DataTable();//创建表 DataColumn dc ...