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>

时间： 2024-12-18 00:02:35

js面向对象组件的相关文章

JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)

继承的其他形式: •类式继承:利用构造函数(类)继承的方式 •原型继承:借助原型来实现对象继承对象类 : JS是没有类的概念的 , 把JS中的构造函数看做的类要做属性和方法继承的时候,要分开继承. function Aaa(){ //父类 this.name = "小明"; } Aaa.prototype.showName = function(){ alert( this.name ); }; function Bbb(){ //子类 } Bbb.prototype = new

原生JS面向对象思想封装轮播图组件

原生JS面向对象思想封装轮播图组件在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能实现都分别分为不同的模块.目前我封装的这个版本还不适配移动端,只适配PC端. 主要的功能有:自动轮播,点击某一张图片对应的小圆点就跳转到指定图片,有前后切换按钮.使用的时候只需要传入图片的路径以及每张图片分别所对应的跳转路径还有目标盒子ID就可以了,还可以自定义每张图轮播的延时,不过延时参数不是必须

js面向对象实现切换面板

js面向对象的特点: 继承(inheritance):对象方法和属性的继承多态(polymorphism):组件开发抽象(abstract):抓住核心问题封装(encapsulation):把功能写出方法面向过程式切换面板实现: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>切换面板</title> <style> #di

为Node.js编写组件的几种方式

本文主要备忘为Node.js编写组件的三种实现:纯js实现.v8 API实现(同步&异步).借助swig框架实现. 关键字:Node.js.C++.v8.swig.异步.回调. 简介首先介绍使用v8 API跟使用swig框架的不同: (1)v8 API方式为官方提供的原生方法,功能强大而完善,缺点是需要熟悉v8 API,编写起来比较麻烦,是js强相关的,不容易支持其它脚本语言. (2)swig为第三方支持,一个强大的组件开发工具,支持为python.lua.js等多种常见脚本语言生成C++组件

js面向对象的系列

在面向对象语言中如java,C#如何定义一个对象,通常是定义一个类,然后在类中定义属性,然后通过new 关键字来实例化这个类,我们知道面向对象有三个特点,继承.多态和封装.那么问题来了,在javaScript中如何定义一个类?在javaScript中如何定义类的属性?如何继承?带着这些问题开始我们的js面向对象之旅吧. 在js中如何定义类? js中是没有类的概念的,但是我们通常会用一个函数定义成一个类.funtion class1(){ //类的成员定义 } 这里class1既是一个函数也是一个

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

js面向对象程序设置——创建对象

js面向对象编程：如何实现方法重载

js中如何实现方法重载?这涉及到三个问题 1同名函数的调用问题 2函数中特殊的参数arguments 3如何利用arguments实现方法重载 1同名函数的调用问题都知道在js中如果存在多个名称相同的函数,则调用实际每次都只使用最后一个,js其实是没有重载的,也就是说,如果定义了多个同名的函数,单参数不一样,在调用时,js不管参数个数,只管前后顺序例如: function test1(arg1) { alert("参数1:"+arg1); } function test1(arg1

js面向对象编程：如何定义常量？

js中有一个关键字const,但目前的浏览器似乎还不支持,如果一定要定义一些常量,其实可以使用闭包,匿名函数实现常量的定义. 例如: var Class = (function() { var UPPER_BOUND = 100;//定义了常量 var Test={}; // 定义了一个静态方法获取常量的方法 Test.getUPPER_BOUND=function() { return UPPER_BOUND; } return Test; })(); 用法: var k=Class.get