面向对象的javascript系列文章（3）继承——代码重用

77 阅读 0 评论 51 点赞

我是靠谱客的博主怡然大神，最近开发中收集的这篇文章主要介绍面向对象的javascript系列文章（3）继承——代码重用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

javascript中如何实现继承

1.1类式继承

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>类式继承</title>
</head>
<body>
<script>
//class person
var Person = (function (){

	var Person = function (name){
		this._name;

		this.setName(name);
	};

	Person.prototype.setName = function (name){
		if(typeof name !=='string'){
			throw new Error("Person类的属性name必须是string类型！");
		}else{
			this._name = name;
		}
	};
	Person.prototype.getName = function (){
		return this._name;
	};

	return Person;
})();

function extend(subClass,superClass){
	var F = function(){};
	F.prototype = superClass.prototype;
	subClass.prototype = new F();
	subClass.prototype.constructor = subClass;

	//使得在子类中的构造函数或公共函数可以不依赖与父类进行调用
	subClass.superClass = superClass;
	if(superClass.prototype.constructor == Object.prototype.constructor){
		superClass.prototype.constructor = superClass;
	}
}
//class Author extend Person
var Author = (function (){

	var Author = function (name, books){
		//调用父类Person的构造函数
		/*Person.call(this,name);*/
		this.superClass.call(this,name);

		this._books;

		this.setBooks(books);
	};

	extend(Author,Person);

	Author.prototype.setBooks = function (books){
		if(typeof books !== 'string'){
			throw new Error("Author类的属性books必须是string类型！");
		}else{
			this._books = books;
		}
	};
	Author.prototype.getBooks = function (){
		return this._books;
	};
	Author.prototype.getName = function (){
		var name = this.superClass.prototype.getName.call(this);
		return name +" Author of"+this._books;
	};


	return Author;
})();







</script>
</body>
</html>

1.2原型继承

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>原型继承</title>
</head>
<body>
<script>
//原型继承兼容
Object.prototype.create = Object.prototype.create || function (proto,properties){
	if(typeof proto !== 'Object' && typeof proto !== 'function'){
		throw typeError("将要创建对象的原型必须是object类型或者是null");
	}
	function f(){};
	f.prototype = proto;
	var obj = new f();

	if(typeof properties !== undefined){
		Object.defineProperties(this,properties);
	}

	return obj;
};

//对于私有的属性 可以通过特性函数对他设置，由于属性的特性设置数据类型的属性将会在这个对象中设置
//但是对于公共的属性来说继承而来特别是对象类型的属性，只能访问不能设置否则这一类属性之间不能共享
//解决办法深度克隆
function deepClone(obj,cloneObj,property){
	if(typeof obj !=="object" && typeof obj !== 'function'){
		throw new Error("第一个参数必须是对象类型");
	}
	if(typeof cloneObj !=="object" && typeof cloneObj !== 'function'){
		throw new Error("第二个参数必须是对象类型");
	}
	if(property){
		if(!Array.isArray(property))
			throw new Error("第三个参数必须是Array类型");
		for(var i = 0; i<property.length; i++){
			setProperty(property[i]);
		}
	}else{
		for(var prop in cloneObj){
			if(cloneObj.hasOwnProperty(prop)){
				setProperty(prop);
			}
		}
	}
	
	function setProperty(prop){
		var val = cloneObj[prop];
			if(typeof val !== "object"){
				obj[prop] = val;
			}else{
				
				if(Array.isArray(val)){
					obj[prop] = [];
				}else{
					obj[prop] = {};
				}
				deepClone(obj[prop],val);
			}
	}	
}

var p = {
	w:23,
	name:{
		ar:[1,2,3],
		b:{
			c:34
		}
	}
}

//定义Person类
var Person = (function(){
	var Person = {
		_name:"!private property",

		getName:function(){
			return this._name;
		},
		setName:function(name){
			if(typeof name !== 'string'){
				throw new Error(Person类的name属性必须为string类型);
			}
			this._name = name;//让这个属性都添加到对象中去防护属性的读写不同意
		}
	};
	Person.constructor = Person;
	return Person;
})();

var p1 = Object.create(Person);
p1.setName("maotr");

var Author = (function(){
	var Author = Object.create(Person);
	Author._books = "!private property";
	Author.getBooks = function(){
		return this._books;
	};
	Author.setBooks = function(books){
		if(typeof books !== "string"){
			throw new Error(Author类的books属性必须为string类型);
		}
		this._books = books;//让这个属性都添加到对象中去防护属性的读写不同意
	};
	return Author;
})();





</script>
</body>
</html>

这里的deepClone函数可以还可以实现多继承，只不过是在被继承的对象的prototype中添加集成几个对象的方法。