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开发经历的 ...
随机推荐
- Markdown--PDF--PPT--Flash 工具链
markdown->html Haroopad / sublime->pdf chrome ctrl+p 打印成无边框pdf->ppt PDF to PowerPoint Conve ...
- ubuntu 中增加鼠标右键菜单，为Windows 的exe 程序快速增加桌面快捷键
#!/bin/bashmyfile=$NAUTILUS_SCRIPT_SELECTED_FILE_PATHSmyfilename=${myfile##*/}myfilename=${myfilenam ...
- Abot爬虫和visjs
1. 引言 最近接触Abot爬虫也有几天时间了,闲来无事打算从IMDB网站上爬取一些电影数据玩玩.正好美国队长3正在热映,打算爬取漫威近几年的电影并用vis这个JS库呈现下漫威宇宙的相关电影. Abo ...
- Viking Village维京村落demo中的地面积水效果
效果如下: 似乎是通过高光贴图实现的,查找后发现具体在这: 它使用了基于Standard的TerrainSurface自定义Shader,关闭该帖图后效果消失: 这个TerrainSurfaceSha ...
- laravel框架总结(六) -- 门面(facades)
Facades 为应用程序的服务容器中可用的类提供了一个「静态」接口. Laravel 本身附带许多的 facades,甚至你可能在不知情的状况下已经在使用他们! xpower的静态接口(门面 ...
- easyui datagrid 仿ext—右键
var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* gri ...
- 编译android源码官方教程(6)编译内核
Building Kernels IN THIS DOCUMENT Selecting a kernel Identifying kernel version Downloading sources ...
- C 语言中用bsearch()实现查找操作
C语言中可以用bsearch()实现二分查找.同qsort()一样,bsearch()也包含在库中,且同样要自定义比较子函数.其原型如下: void *bsearch(const void *key, ...
- CSS3的chapter3
CSS的常用样式分为几大类: 字体样式(font,color, text-decoration ,text-shadow) 元素样式(width,height,margin,padding,opaci ...
- python文件和目录操作方法大全（含实例）
一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...