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>
js面向对象组件的更多相关文章
- JS面向对象组件（六） -- 拖拽功能以及组件的延展
HTML部分 <div id="div1"></div> <div id="div2"></div> CSS部分 ...
- JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)
继承的其他形式: •类式继承:利用构造函数(类)继承的方式 •原型继承:借助原型来实现对象继承对象 类 : JS是没有类的概念的 , 把JS中的构造函数看做的类 要做属性和方法继承的时候,要分开继 ...
- JS面向对象组件(一) ---包装对象与原型链
首先我们可以看看平时我们常用的 var str = 'hello'; alert(typeof str); //string var str = new String("hello" ...
- JS面向对象组件（五） -- 复制对象（拷贝继承）
研究到这儿,竟然出现了一个面试题目 var a = { name : '小明' }; var b = a; b.name = '小强'; alert( a.name ); 结果必然是“小强”,原因是对 ...
- JS面向对象组件（四） -- 面向对象的继承
什么是继承 •在原有对象的基础上,略作修改,得到一个新的对象 •不影响原有对象的功能 //父类 createPerson function createPerson(name,sex){ this.n ...
- JS面向对象组件(三)--面向对象中的常用属性和方法
图片的由来看下面: 1.hasOwnProperty:看是不是对象自身下面的属性 var arr = []; arr.num = ; Array.prototype.num2 = ; //所有的数组对 ...
- JS面向对象组件(二)--Javascript原型链
原型链 : 实例对象与原型之间的连接,叫做原型链 –__proto__( 隐式连接 ),这就是原型链,平时我们是看不到的. 原型链的最外层 : Object.prototype function Aa ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础：JS面向对象&字面量& this字
缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
随机推荐
- eclipse远程debug
由于一般比较正规项目,都会有好几个版本,有时候在测试版本的时候,一切都好好的,然后提交到其他版本之后会有各种各样的问题,这个时候如果不能快速准确的定位到问题,那么我们就需要用 eclipse远程deb ...
- MVC4 Filter 验证客户端访问类型（移动端、PC端）
Filter: 1 /// <summary> /// 检测是否是手机访问 /// </summary> public class IsMobileFilter : Actio ...
- Python基础第二篇
一.三元运算 if True: name='a' else: name='b' #上面的代码用三元运算表示: name="a" if True else "b" ...
- 【转】Struts1.x系列教程（5）：HTML标签库
转载地址:http://www.blogjava.net/nokiaguy/archive/2009/01/archive/2009/01/archive/2009/01/archive/2009/0 ...
- 如何面试有2年java工作经验的应聘人员
1.什么是事务控制?答:事务控制就是将一系列操作当成一个不可拆分的逻辑单元,保证这些操作要么都成功,要么都失败.在关系数据库中,一个事务可以是一条SQL语句,一组SQL语句或整个程序.事务是恢复和并发 ...
- Linux phpbb论坛的安装（英文版）
1:建立文件夹
- mysql删除带有NULL的行
假如表A有一列,名字为“Age”,有些行对应的Age为NULL,如果要删除这些行,使用一下语句: delete from A where Age is null;
- 【20160924】GOCVHelper 图像处理部分（3）
//根据轮廓的圆的特性进行选择 vector<VP> selectShapeCircularity(Mat src,Mat& draw,vector<VP> c ...
- void与void *
转载:http://blog.csdn.net/geekcome/article/details/6249151 void的含义 void即“无类型”,void *则为“无类型指针”,可以指向任何数据 ...
- RCP：如何保存TaskList及如何获取TaskList
如果我们在Eclipse RCP程序中添加TaskList View,用来管理Task或者TODO项,如下代码: PlatformUI.getWorkbench().getActiveWorkbenc ...