面向对象的组成
-
<!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>
-
<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 : 拷贝继承 (<a href="http://lib.csdn.net/base/22" class="replace_word" title="jQuery知识库" target="_blank" style="color:#df3434; font-weight:bold;">jquery</a>也是采用拷贝继承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>
JS面向对象及组件开发
原文:http://blog.csdn.net/xiaohubeiplus/article/details/51143371