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开发经历的 ...
随机推荐
- js 格式化数字保留2位小数
function toDecimal2(x) { var f = parseFloat(x); if (isNaN(f)) { return false; } var f = Math.round(x ...
- 阿里云OneinStack，Linux下tomcat命令
阿里云OneinStack,Linux下tomcat命令 Linux下如何查看tomcat是否启动在Linux系统下,重启Tomcat使用命令操作的首先,进入Tomcat下的bin目录cd /usr/ ...
- Create and Use Custom Attributes
http://www.codeproject.com/Articles/1811/Creating-and-Using-Attributes-in-your-NET-applicat Create a ...
- Java程序员开发参考资源
构建 这里搜集了用来构建应用程序的工具. Apache Maven:Maven使用声明进行构建并进行依赖管理,偏向于使用约定而不是配置进行构建.Maven优于Apache Ant.后者采用了一种过程化 ...
- R----Shiny包介绍学习
为什么用Shiny Shiny让数据分析师写完分析与可视化代码后,稍微再花几十分钟,就可以把分析代码工程化,将分析成果快速转化为交互式网页分享给别人.所以,如果你是一名使用R的数据分析师,选择Shin ...
- jQuery 添加元素
jQuery 添加元素 1.append 在被选元素的结尾插入内容 $(document).ready(function(){ $("button").click(function ...
- EFS加密解密----重装系统后
重装系统尤其是格式化重装系统之后,如果没有正确地备份私钥,那么加密的文件将无法打开,加密的文件也暂时没有办法进行快速破解. 并非重装后用相同用户名+密码就可以解密的. Advanced EFS Dat ...
- 3个常用基于Linux系统命令行WEB网站浏览工具（w3m/Links/Lynx）
一般我们常用的浏览器肯定是基于可视化界面的图文结合的浏览界面效果,比如FireFox.Chrome.Opera等等,但是有些时候折腾和项目 的需要,在Linux环境中需要查看某个页面的文字字符,我们需 ...
- zoj3430Detect the Virus(ac自动机）
链接 解码之后是跟普通的自动机求解一下的,只不过解码比较恶心,512=>N>=0 ,所以不能用字符串来存,需要转换成整数来做. #include <iostream> #inc ...
- 关于NOR-FLASH和NAND-fLASH的区别。——Arvin
NANDFLASH: Nand-flash内存是flash内存的一种,1989年,东芝公司发表了NAND flash结构.其内部采用非线性宏单元模式,为固态大容量内存的实现提供了廉价有效的解决方案.N ...