jQuery-源码阅读,JavaScript原生继承方式与jQuery中的继承

13 篇文章 0 订阅
8 篇文章 1 订阅

JavaScript中继承方法有以下几种:

1.原型链继承:


function Book (name,author){
    this.name=name;
    this.author=author;
	}
	Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};
	function JavaScript(){}
	JavaScript.prototype=new Book("JavaScript","Nicholas");
	var js1=new JavaScript();
	var js2=new JavaScript();
	js1.tell();//Book:JavaScript Author:Nicholas
	js2.tell();//Book:JavaScript Author:Nicholas

可以发现,原型链继承有一个问题,那就是父类中的私有属性,会因为父类作为子类原型构建原型链,使得子类所有实例所共享。当我们通过一个实例修改共享属性时,其他实例也将受到影响:

function Book (name,author){
	this.name=name;
	this.author=[author];
}
Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};
function JavaScript(){}
JavaScript.prototype=new Book("JavaScript","Nicholas");
var js1=new JavaScript();
var js2=new JavaScript();
js1.author.push("C.Zakas");
js2.tell();//Book:JavaScript Author:Nicholas,C.Zakas

但是当你直接为实例中属性赋值时,是在实例中重新定义了一个对应属性,而不是在修改原型中属性:

        function Book (name,author){
		this.name=name;
		this.author=author;
	}
	Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};
	function JavaScript(){}
	JavaScript.prototype=new Book("JavaScript","Nicholas");
	var js1=new JavaScript();
	var js2=new JavaScript();
	js1.author="C.Zakas";
	//并不是js1没有影响js2,而是在js1中创建了新author属性
	console.log(js1.hasOwnProperty("author"));//true
	console.log(js2.hasOwnProperty("author"));//false
	js1.tell();//Book:JavaScript Author:C.Zakas 
	js2.tell();//Book:JavaScript Author:Nicholas

2.构造函数继承:

       function Book (name,author){
		this.name=name;
		this.author=author;
	}
	Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};
	function JavaScript(){
		Book.apply(this,arguments);
	}
	var js1=new JavaScript("JavaScript","Nicholas");
	var js2=new JavaScript("JavaScriopt","C.Zakas");
	console.log("js1:"+js1.author+" js2:"+js2.author);//js1:Nicholas js2:C.Zakas
	js1.tell();//Uncaught TypeError: js1.tell is not a function
	js2.tell();//Uncaught TypeError: js2.tell is not a function

构造函数继承,可以使每个子类实例有一份自己的属性,但是无法找到父类原型中的函数。

3.组合继承:

        function Book (name,author){
		this.name=name;
		this.author=author;
	}
	Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};
	function JavaScript(){
		Book.apply(this,arguments);
	}
	JavaScript.prototype=new Book();
	var js1=new JavaScript("JavaScript","Nicholas");
	var js2=new JavaScript("JavaScriopt","C.Zakas");
	console.log("js1:"+js1.author+" js2:"+js2.author);//js1:Nicholas js2:C.Zakas
	js1.tell();//Book:JavaScript Author:Nicholas
	js2.tell();//Book:JavaScriopt Author:C.Zakas
        console.log(js1.tell===js2.tell);//true

组合继承使得每个子类实例,既可以保存一份自己的属性,又可以共享同一个函数。

4.寄生组合继承:

        function Book (name,author){
		this.name=name;
		this.author=author;
	}
	Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};
	function JavaScript(){
		Book.apply(this,arguments);
	}
	JavaScript.prototype=Object.create(Book.prototype);
	JavaScript.prototype.constructor=JavaScript;
	var js1=new JavaScript("JavaScript","Nicholas");
	var js2=new JavaScript("JavaScriopt","C.Zakas");
	console.log("js1:"+js1.author+" js2:"+js2.author);//js1:Nicholas js2:C.Zakas
	js1.tell();//Book:JavaScript Author:Nicholas
	js2.tell();//Book:JavaScriopt Author:C.Zakas
	console.log(js1.tell===js2.tell);//true

由以上分析可以看出,JavaScript中原生的继承方式各有利弊,在jQuery中选择了另一种继承方式,拷贝继承。jQuery的拷贝继承分为两种:深拷贝和浅拷贝。默认为浅拷贝。其实现请见:http://blog.csdn.net/qiqingjin/article/details/50761517







  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值