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开发经历的 ...
随机推荐
- MergeSort（归并排序）算法Java实现
归并排序 归并排序 (merge sort) 是一类与插入排序.交换排序.选择排序不同的另一种排序方法.归并的含义是将两个或两个以上的有序表合并成一个新的有序表.归并排序有多路归并排序.两路归并排序 ...
- jacob 多个web项目报错 jacob-1.14.3-x64.dll already loaded in another classloader jacob
多个web项目报错 jacob-1.14.3-x64.dll already loaded in another classloader jacob 这个问题困扰了很久,网上很多解决方案,很多都不成功 ...
- 【过程改进】 windows下jenkins常见问题填坑
没有什么高深的东西,1 2天的时间大多数人都能自己摸索出来,这里将自己遇到过的问题分享出来避免其他同学再一次挖坑. 目录 1. 主从节点 2. Nuget自动包还原 3. powershell部署 4 ...
- 整理课堂笔记 pl/sql orcale异常
1>>>>>异常错误处理 1 >预定义的异常处理 预定义说明的部分 ORACLE 异常错误对这种异常情况的处理,只需在PL/SQL块的异常处理部分,直接引用相应 ...
- 用NULL布局为什么不能显示
import javax.swing.JComboBox;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing. ...
- noi 2728 摘花生
题目链接: 很像上一题,加上自己本身,选最优值. http://noi.openjudge.cn/ch0206/2728/ http://paste.ubuntu.com/23402493/
- EntityFramework Core 学习笔记 —— 包含与排除类型
原文地址:https://docs.efproject.net/en/latest/modeling/included-types.html 在模型类中包含一种类型意味着 EF 拥有了这种类型的元数据 ...
- Js 实现tab切换效果
今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的
- IDispatch error #3092
在采用ADO访问ACCESS数据库的时候,出现IDispatch error #3092错误的原因之一是在SQL语句中使用了保留关键字.比如:如果表的名称为User 则会出现该错误.,若字段为valu ...
- easyui editor combobox multiple
$.extend($.fn.datagrid.defaults.editors,{ combobox: { init: function(container, options){ var combo ...