js面向对象组件

时间：2023-03-10 00:13:00
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 = ;

alert( str.number );  //undefined

</script>

</head>

<body>

</body>

</html>

3.

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

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 = ;

Array.prototype.num2 = ;

//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 = ;

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

　　

相关文章