js面向对象组件

1.包装对象

<!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>

　　2.包装对象

<!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>

4.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>

5constructor

<!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>

6instanceof

<!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>

7.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>

8.继承

<!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>

9.9对象的复制

<!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>