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开发经历的 ...
随机推荐
- 关于安装qt之后的qmake命令
今天通过在archlinux中安装qt5发现了关于qmake这个命令的一些事情. 1. /bin/qmake 是 /bin/qtchooser 的符号链接,/bin/qtchooser 由一个叫 qt ...
- [CrunchBang]tint2默认设置
#--------------------------------------------- # TINT2 CONFIG FILE #-------------------------------- ...
- Grunt一辈子的好基友：yeoman
yeoman是什么 yeoman主要包含了三个工具:yo.grunt.bower.我们先看下这三个工具分别是做什么的: yo:脚手架工具,主要作用是创建项目骨架(跟grunt-init有点像). gr ...
- 简单破解.net（C#）程序
一直在用makedown2(free版),每当打开多个页面,就会提示升级为pro,还要注册码激活什么的.就有了破解的想法.以前也弄过一个小程序的破解,所以还算有些经验. 1. ildasm 用来将ma ...
- odd_even_list
public class Solution { public ListNode OddEvenList(ListNode head) { if(head == null || head.next == ...
- ReactiveCocoa常见操作方法介绍/MVVM架构思想
1.ReactiveCocoa常见操作方法介绍. 1.1 ReactiveCocoa操作须知 所有的信号(RACSignal)都可以进行操作处理,因为所有操作方法都定义在RACStream.h中, ...
- 一步一步教你编写与搭建自动化测试框架——python篇
[本文出自天外归云的博客园] 这两天用python写了一个自动化测试框架,取名为Auty.准备用来做Web方面的接口测试,以下为Auty框架一步一步的搭建过程——
- Tsung安装与使用
Tsung安装与使用 Tsung安装与使用的详细说明,包括测试场景的脚本配置说明 Ray 2013/11/11 目录 安装tsung Tsung运行环境安装... Tsung安装... 使用Tsu ...
- 针对高通BMS的研究 高通电量计
点击打开链接 高通8064 8974 8926等pm芯片都集成了电量计,估计后续芯片都会一直存在,现在许多项目UI状态栏电池都有百分比显示,所以需要深入分析BMS有助于解决电量方面的BUG. 一: S ...
- 【转】CentOS下载版本介绍
官网:http://www.centos.org/ 下载:http://mirror.neu.edu.cn/centos/6.6/isos/ 系统运维:http://www.osyunwei.com/ ...