JS面向对象及组件开发

最新推荐文章于 2024-06-26 08:16:14 发布

montaellis

最新推荐文章于 2024-06-26 08:16:14 发布

阅读量1.9w

点赞数 1

分类专栏： miaov javascript

javascript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

miaov

13 篇文章 0 订阅

订阅专栏

面向对象的组成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

var arr = [];

arr.number = 10;  //对象下面的变量：叫做对象的属性

//alert( arr.number );
//alert( arr.length );

arr.test = function(){  //对象下面的函数 : 叫做对象的方法
	alert(123);
};

arr.test();

arr.push();
arr.sort();

</script>
</head>

<body>
</body>
</html>

创建第一个面向对象程序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

//var obj = {};

var obj = new Object();  //创建了一个空的对象
obj.name = '小明';  //属性
obj.showName = function(){  //方法
	alert(this.name);
};

obj.showName();


var obj2 = new Object();  //创建了一个空的对象
obj2.name = '小强';  //属性
obj2.showName = function(){  //方法
	alert(this.name);
};

obj2.showName();



</script>
</head>

<body>
</body>
</html>

工厂方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

//工厂方式 : 封装函数

function createPerson(name){
	
	//1.原料
	var obj = new Object();
	//2.加工
	obj.name = name;
	obj.showName = function(){
		alert( this.name );
	};
	//3.出场
	return obj;
	
}

var p1 = createPerson('小明');
p1.showName();
var p2 = createPerson('小强');
p2.showName();

</script>
</head>

<body>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>


//当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)

//new后面调用的函数 : 叫做构造函数

function CreatePerson(name){
	
	this.name = name;
	this.showName = function(){
		alert( this.name );
	};
	
}

var p1 = new CreatePerson('小明');
//p1.showName();
var p2 = new CreatePerson('小强');
//p2.showName();

alert( p1.showName == p2.showName );  //false

var arr = new Array();
var date = new Date();

</script>
</head>

<body>
</body>
</html>

对象的引用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

/*var a = [1,2,3];
var b = [1,2,3];

alert( a == b );  //false*/

//var a = 5;
//var b = a;
//b += 3;
alert(b); //8
//alert(a); //5   基本类型 : 赋值的时候只是值的复制


//var a = [1,2,3];
//var b = a;
//b.push(4);
alert(b);  //[1,2,3,4]
//alert(a);  //[1,2,3,4]   对象类型 : 赋值不仅是值的复制，而且也是引用的传递

//var a = [1,2,3];
//var b = a;
//b = [1,2,3,4];
alert(b); //[1,2,3,4]
//alert(a); //[1,2,3]

//var a = 5;
//var b = 5;
//
//alert(a == b);  //基本类型 : 值相同就可以


//var a = [1,2,3];
//var b = [1,2,3];

//alert( a == b );  //false  //对象类型 : 值和引用都相同才行

var a = [1,2,3];
var b = a;
alert( a==b );  //true

</script>
</head>

<body>
</body>
</html>

原型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

//原型 : 去改写对象下面公用的方法或者属性 , 让公用的方法或者属性在内存中存在一份 ( 提高性能 )

//原型 : CSS中的class
//普通方法 : CSS中的style

//原型 : prototype : 要写在构造函数的下面

/*var arr = [1,2,3,4,5];
var arr2 = [2,2,2,2,2];

arr.sum = function(){
	
	var result = 0;
	for(var i=0;i<this.length;i++){
		result += this[i];
	}
	return result;
	
};
arr2.sum = function(){
	
	var result = 0;
	for(var i=0;i<this.length;i++){
		result += this[i];
	}
	return result;
	
};

//alert( arr.sum() );  //15
//alert( arr2.sum() );  //10*/

var arr = [1,2,3,4,5];
var arr2 = [2,2,2,2,2];

Array.prototype.sum = function(){
	var result = 0;
	for(var i=0;i<this.length;i++){
		result += this[i];
	}
	return result;
};

alert( arr.sum() );  //15
alert( arr2.sum() );  //10

</script>
</head>

<body>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

var arr = [];
//arr.number = 10;
Array.prototype.number = 20;

alert(arr.number);

</script>
</head>

<body>
</body>
</html>

工厂方法之原型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>


//当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)

//new后面调用的函数 : 叫做构造函数

function CreatePerson(name){
	
	this.name = name;
	
}
CreatePerson.prototype.showName = function(){
	alert( this.name );
};

var p1 = new CreatePerson('小明');
//p1.showName();
var p2 = new CreatePerson('小强');
//p2.showName();

alert( p1.showName == p2.showName );  //true

var arr = new Array();
var date = new Date();

</script>
</head>

<body>
</body>
</html>

面向对象的写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

function 构造函数(){
	this.属性
}

构造函数.原型.方法 = function(){};


var 对象1 = new 构造函数();
对象1.方法();
</script>
</head>

<body>
</body>
</html>

面向对象的选项卡

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script>

/*window.onload = function(){
	var oParent = document.getElementById('div1');
	var aInput = oParent.getElementsByTagName('input');
	var aDiv = oParent.getElementsByTagName('div');
	
	for(var i=0;i<aInput.length;i++){
		aInput[i].index = i;
		aInput[i].onclick = function(){
			for(var i=0;i<aInput.length;i++){
				aInput[i].className = '';
				aDiv[i].style.display = 'none';
			}
			this.className = 'active';
			aDiv[this.index].style.display = 'block';
		};
	}
	
};*/

//先变型:
//尽量不要出现函数嵌套函数
//可以有全局变量
//把onload中不是赋值的语句放到单独函数中


var oParent = null;
var aInput = null;
var aDiv = null;

window.onload = function(){
	
	oParent = document.getElementById('div1');
	aInput = oParent.getElementsByTagName('input');
	aDiv = oParent.getElementsByTagName('div');

	init();
	
};

function init(){
	for(var i=0;i<aInput.length;i++){
		aInput[i].index = i;
		aInput[i].onclick = change;
	}
}

function change(){
	for(var i=0;i<aInput.length;i++){
		aInput[i].className = '';
		aDiv[i].style.display = 'none';
	}
	this.className = 'active';
	aDiv[this.index].style.display = 'block';
}

</script>
</head>

<body>
<div id="div1">
	<input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">11111</div>
    <div>22222</div>
    <div>33333</div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script>

/*window.onload = function(){
	var oParent = document.getElementById('div1');
	var aInput = oParent.getElementsByTagName('input');
	var aDiv = oParent.getElementsByTagName('div');
	
	for(var i=0;i<aInput.length;i++){
		aInput[i].index = i;
		aInput[i].onclick = function(){
			for(var i=0;i<aInput.length;i++){
				aInput[i].className = '';
				aDiv[i].style.display = 'none';
			}
			this.className = 'active';
			aDiv[this.index].style.display = 'block';
		};
	}
	
};*/

//先变型:
//尽量不要出现函数嵌套函数
//可以有全局变量
//把onload中不是赋值的语句放到单独函数中


/*var oParent = null;
var aInput = null;
var aDiv = null;

window.onload = function(){
	
	oParent = document.getElementById('div1');
	aInput = oParent.getElementsByTagName('input');
	aDiv = oParent.getElementsByTagName('div');

	init();
	
};

function init(){
	for(var i=0;i<aInput.length;i++){
		aInput[i].index = i;
		aInput[i].onclick = change;
	}
}

function change(){
	for(var i=0;i<aInput.length;i++){
		aInput[i].className = '';
		aDiv[i].style.display = 'none';
	}
	this.className = 'active';
	aDiv[this.index].style.display = 'block';
}*/

//改成面向对象:
//全局变量就是属性
//函数就是方法
//Onload中创建对象

//改this指向问题 : 事件或者是定时器,尽量让面向对象中的this指向对象

window.onload = function(){
	
	var t1 = new Tab();
	t1.init();
	
};

function Tab(){
	this.oParent = document.getElementById('div1');
	this.aInput = this.oParent.getElementsByTagName('input');
	this.aDiv = this.oParent.getElementsByTagName('div');
}

Tab.prototype.init = function(){
	var This = this;
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].index = i;
		this.aInput[i].onclick = function(){
			This.change(this);
		};
	}
};

Tab.prototype.change = function(obj){
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].className = '';
		this.aDiv[i].style.display = 'none';
	}
	obj.className = 'active';
	this.aDiv[obj.index].style.display = 'block';
};

</script>
</head>

<body>
<div id="div1">
	<input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">11111</div>
    <div>22222</div>
    <div>33333</div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script>

/*var arr = [4,7,1,3];
arr.sort();  // 1 3 4 7

var arr2 = [4,7,1,3];
arr2.push(5);
arr2.sort(); // 1 3 4 5 7
*/

window.onload = function(){
	
	var t1 = new Tab('div1');
	t1.init();
	t1.autoPlay();
	
	var t2 = new Tab('div2');
	t2.init();
	t2.autoPlay();
	
};

function Tab(id){
	this.oParent = document.getElementById(id);
	this.aInput = this.oParent.getElementsByTagName('input');
	this.aDiv = this.oParent.getElementsByTagName('div');
	this.iNow = 0;
}

Tab.prototype.init = function(){
	var This = this;
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].index = i;
		this.aInput[i].onclick = function(){
			This.change(this);
		};
	}
};

Tab.prototype.change = function(obj){
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].className = '';
		this.aDiv[i].style.display = 'none';
	}
	obj.className = 'active';
	this.aDiv[obj.index].style.display = 'block';
};

Tab.prototype.autoPlay = function(){
	
	var This = this;
	
	setInterval(function(){
		
		if(This.iNow == This.aInput.length-1){
			This.iNow = 0;
		}
		else{
			This.iNow++;
		}
		
		for(var i=0;i<This.aInput.length;i++){
			This.aInput[i].className = '';
			This.aDiv[i].style.display = 'none';
		}
		This.aInput[This.iNow].className = 'active';
		This.aDiv[This.iNow].style.display = 'block';
		
		
	},2000);
	
};

</script>
</head>

<body>
<div id="div1">
	<input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">11111</div>
    <div>22222</div>
    <div>33333</div>
</div>

<div id="div2">
	<input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">11111</div>
    <div>22222</div>
    <div>33333</div>
</div>
</body>
</html>

面向对象的拖拽

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script>

/*var arr = [4,7,1,3];
arr.sort();  // 1 3 4 7

var arr2 = [4,7,1,3];
arr2.push(5);
arr2.sort(); // 1 3 4 5 7
*/

window.onload = function(){
	
	var t1 = new Tab('div1');
	t1.init();
	t1.autoPlay();
	
	var t2 = new Tab('div2');
	t2.init();
	t2.autoPlay();
	
};

function Tab(id){
	this.oParent = document.getElementById(id);
	this.aInput = this.oParent.getElementsByTagName('input');
	this.aDiv = this.oParent.getElementsByTagName('div');
	this.iNow = 0;
}

Tab.prototype.init = function(){
	var This = this;
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].index = i;
		this.aInput[i].onclick = function(){
			This.change(this);
		};
	}
};

Tab.prototype.change = function(obj){
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].className = '';
		this.aDiv[i].style.display = 'none';
	}
	obj.className = 'active';
	this.aDiv[obj.index].style.display = 'block';
};

Tab.prototype.autoPlay = function(){
	
	var This = this;
	
	setInterval(function(){
		
		if(This.iNow == This.aInput.length-1){
			This.iNow = 0;
		}
		else{
			This.iNow++;
		}
		
		for(var i=0;i<This.aInput.length;i++){
			This.aInput[i].className = '';
			This.aDiv[i].style.display = 'none';
		}
		This.aInput[This.iNow].className = 'active';
		This.aDiv[This.iNow].style.display = 'block';
		
		
	},2000);
	
};

</script>
</head>

<body>
<div id="div1">
	<input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">11111</div>
    <div>22222</div>
    <div>33333</div>
</div>

<div id="div2">
	<input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">11111</div>
    <div>22222</div>
    <div>33333</div>
</div>
</body>
</html>

包装对象

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

/*function Aaa(){
	this.name = '小明';
}
Aaa.prototype.showName = function(){
	alert( this.name );
};

var a1 = new Aaa();
a1.showName();


var arr = new Array();
arr.push();
arr.sort();

//在JS源码 : 系统对象也是基于原型的程序

function Array(){
	this.lenglth = 0;
}
Array.prototype.push = function(){};
Array.prototype.sort = function(){};*/


//尽量不要去修改或者添加系统对象下面的方法和属性

var arr = [1,2,3];

Array.prototype.push = function(){
	
	//this : 1,2,3
	//arguments : 4,5,6
	
	for(var i=0;i<arguments.length;i++){
		this[this.length] = arguments[i]
	}
	
	return this.length;
};

arr.push(4,5,6);

alert( arr );

//pop shift unshift splice sort

</script>
</head>

<body>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

/*var str = 'hello';

alert( typeof str );

str.charAt(0);
str.indexOf('e');*/

//null undefined
//包装对象 : 基本类型都有自己对应的包装对象 : String  Number  Boolean 

/*var str = new String('hello');

//alert( typeof str );

alert(str.charAt(1));

String.prototype.charAt = function(){};*/



//var str = 'hello';
//str.charAt(0);  //基本类型会找到对应的包装对象类型，然后包装对象把所有的属性和方法给了基本类型，然后包装对象消失


/*var str = 'hello';

String.prototype.lastValue = function(){
	return this.charAt(this.length-1);
};

alert( str.lastValue() );  //o*/


var str = 'hello';

str.number = 10;

alert( str.number );  //undefined

</script>
</head>

<body>
</body>
</html>

原型链

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

//原型链 : 实例对象与原型之间的连接，叫做原型链

//原型链的最外层 : Object.prototype

function Aaa(){
	//this.num = 20;
}
//Aaa.prototype.num = 10;
Object.prototype.num = 30;

var a1 = new Aaa();
alert(a1.num);

</script>
</head>

<body>
</body>
</html>

hasOwnProperty

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

//hasOwnProperty : 看是不是对象自身下面的属性

var arr = [];
arr.num = 10;
Array.prototype.num2 = 20;

//alert(  arr.hasOwnProperty('num')  );  //true

alert(  arr.hasOwnProperty('num2')  );  //false



</script>
</head>

<body>
</body>
</html>

constructor

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

//constructor : 查看对象的构造函数

/*function Aaa(){
}

var a1 = new Aaa();

alert( a1.constructor );  //Aaa

var arr = [];
alert( arr.constructor == Array );  //true*/


/*function Aaa(){
}
//Aaa.prototype.constructor = Aaa;   //每一个函数都会有的，都是自动生成的

//Aaa.prototype.constructor = Array;

var a1 = new Aaa();
alert( a1.hasOwnProperty == Object.prototype.hasOwnProperty );  //true*/


/*function Aaa(){
}

Aaa.prototype.name = '小明';
Aaa.prototype.age = 20;

Aaa.prototype = {
	constructor : Aaa,
	name : '小明',
	age : 20
};

var a1 = new Aaa();
alert( a1.constructor );*/


function Aaa(){
}

Aaa.prototype.name = 10;
Aaa.prototype.constructor = Aaa;

for( var attr in Aaa.prototype ){
	alert(attr);
}

</script>
</head>

<body>
</body>
</html>

instanceof

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

//instanceof : 对象与构造函数在原型链上是否有关系

function Aaa(){
}

var a1 = new Aaa();

//alert( a1 instanceof Object );  //true


var arr = [];

alert( arr instanceof Array );

</script>
</head>

<body>
</body>
</html>

toString

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

//toString() : 系统对象下面都是自带的 , 自己写的对象都是通过原型链找object下面的

/*var arr = [];
alert( arr.toString == Object.prototype.toString ); //false*/

/*function Aaa(){
}
var a1 = new Aaa();
alert( a1.toString == Object.prototype.toString );  //true*/


//toString() : 把对象转成字符串

/*var arr = [1,2,3];

Array.prototype.toString = function(){
	return this.join('+');
};

alert( arr.toString() );  //'1,2,3'*/


//var num = 255;
//alert( num.toString(16) );  //'ff'


//利用toString做类型的判断 : 

/*var arr = [];

alert( Object.prototype.toString.call(arr) == '[object Array]' ); */ //'[object Array]'

window.onload = function(){
	
	var oF = document.createElement('iframe');
	document.body.appendChild( oF );
	
	var ifArray = window.frames[0].Array;
	
	var arr = new ifArray();
	
	//alert( arr.constructor == Array );  //false
	
	//alert( arr instanceof Array );  //false
	
	alert( Object.prototype.toString.call(arr) == '[object Array]' );  //true
	
	
};

</script>
</head>

<body>
</body>
</html>

继承

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

//继承 : 子类不影响父类，子类可以继承父类的一些功能 ( 代码复用 )

//属性的继承 : 调用父类的构造函数 call

//方法的继承 : for in :  拷贝继承 (jquery也是采用拷贝继承extend)

function CreatePerson(name,sex){   //父类
	this.name = name;
	this.sex = sex;
}
CreatePerson.prototype.showName = function(){
	alert( this.name );
};

var p1 = new CreatePerson('小明','男');
//p1.showName();


function CreateStar(name,sex,job){  //子类
	
	CreatePerson.call(this,name,sex);
	
	this.job = job;
	
}

//CreateStar.prototype = CreatePerson.prototype;

extend( CreateStar.prototype , CreatePerson.prototype );

CreateStar.prototype.showJob = function(){
};

var p2 = new CreateStar('黄晓明','男','演员');

p2.showName();


function extend(obj1,obj2){
	for(var attr in obj2){
		obj1[attr] = obj2[attr];
	}
}
</script>
</head>

<body>
</body>
</html>

对象的复制

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

/*var a = {
	name : '小明'
};

var b = a;

b.name = '小强';

alert( a.name );*/


/*var a = {
	name : '小明'
};

//var b = a;

var b = {};

extend( b , a );

b.name = '小强';

alert( a.name );


function extend(obj1,obj2){
	for(var attr in obj2){
		obj1[attr] = obj2[attr];
	}
}*/


var a = [1,2,3];
var b = a;
//b.push(4);

b = [1,2,3,4];

alert(a);

</script>
</head>

<body>
</body>
</html>

继承的拖拽

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute;}
#div2{ width:100px; height:100px; background:yellow; position:absolute; left:100px;}
</style>
<script>

window.onload = function(){
	var d1 = new Drag('div1');
	d1.init();
	
	var d2 = new ChildDrag('div2');
	d2.init();
};

function Drag(id){  //父类
	this.obj = document.getElementById(id);
	this.disX = 0;
	this.disY = 0;
}
Drag.prototype.init = function(){
	
	var This = this;
	
	this.obj.onmousedown = function(ev){
		var ev = ev || window.event;
		This.fnDown(ev);
		
		document.onmousemove = function(ev){
			var ev = ev || window.event;
			This.fnMove(ev);
		};
		document.onmouseup = function(){
			This.fnUp();
		};
		return false;
	};
	
};

Drag.prototype.fnDown = function(ev){
	this.disX = ev.clientX - this.obj.offsetLeft;
	this.disY = ev.clientY - this.obj.offsetTop;
};
Drag.prototype.fnMove = function(ev){
	this.obj.style.left = ev.clientX - this.disX + 'px';
	this.obj.style.top = ev.clientY - this.disY + 'px';
};
Drag.prototype.fnUp = function(){
	document.onmousemove = null;
	document.onmouseup = null;
};


function ChildDrag(id){   //子类
	Drag.call(this,id);
}

extend( ChildDrag.prototype , Drag.prototype );

ChildDrag.prototype.fnMove = function(ev){
	
	var L = ev.clientX - this.disX;
	var T = ev.clientY - this.disY;
	
	if(L<0){
		L = 0;
	}
	else if(L>document.documentElement.clientWidth - this.obj.offsetWidth){
		L = document.documentElement.clientWidth - this.obj.offsetWidth;
	}
	
	this.obj.style.left = L + 'px';
	this.obj.style.top = T + 'px';
};

function extend(obj1,obj2){
	for(var attr in obj2){
		obj1[attr] = obj2[attr];
	}
}

</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

类式继承

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

//类 : JS是没有类的概念的 , 把JS中的构造函数看做的类
	
//要做属性和方法继承的时候，要分开继承
	
function Aaa(){   //父类
	this.name = [1,2,3];
}	
Aaa.prototype.showName = function(){
	alert( this.name );
};

function Bbb(){   //子类
	
	Aaa.call(this);
	
}

var F = function(){};
F.prototype = Aaa.prototype;
Bbb.prototype = new F();
Bbb.prototype.constructor = Bbb; //修正指向问题

var b1 = new Bbb();
//b1.showName();
//alert( b1.name );
//alert( b1.constructor );
b1.name.push(4);

var b2 = new Bbb();

alert( b2.name );



</script>
</head>

<body>
</body>
</html>

原型继承

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

var a = {
	name : '小明'
};

var b = cloneObj(a);

b.name = '小强';

//alert( b.name );
alert( a.name );

function cloneObj(obj){
	
	var F = function(){};
	
	F.prototype = obj;
	
	return new F();
	
}


拷贝继承:  通用型的  有new或无new的时候都可以

类式继承:  new构造函数

原型继承:  无new的对象


</script>
</head>

<body>
</body>
</html>

montaellis

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JS面向对象及组件开发

面向对象的组成无标题文档var arr = [];arr.number = 10; //对象下面的变量：叫做对象的属性//alert( arr.number );//alert( arr.length );arr.test = function(){ //对象下面的函数 : 叫做对象的方法 alert(123);};arr.test();arr.pu
复制链接

扫一扫

专栏目录