您的位置：首页 > Web前端 > JavaScript

js面向对象组件

2016-03-03 07:32 369 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航