面向对象的组成
[html] view plain copy
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script>
- var arr = [];
- arr.number = 10; //对象下面的变量:叫做对象的属性
- //alert( arr.number );
- //alert( arr.length );
- arr.test = function(){ //对象下面的函数 : 叫做对象的方法
- alert(123);
- };
- arr.test();
- arr.push();
- arr.sort();
- </script>
- </head>
- <body>
- </body>
- </html>
创建第一个面向对象程序
[html] view plain copy
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script>
- //var obj = {};
- var obj = new Object(); //创建了一个空的对象
- obj.name = '小明'; //属性
- obj.showName = function(){ //方法
- alert(this.name);
- };
- obj.showName();
- var obj2 = new Object(); //创建了一个空的对象
- obj2.name = '小强'; //属性
- obj2.showName = function(){ //方法
- alert(this.name);
- };
- obj2.showName();
- </script>
- </head>
- <body>
- </body>
- </html>
工厂方式
[html] view plain copy
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script>
- //工厂方式 : 封装函数
- function createPerson(name){
- //1.原料
- var obj = new Object();
- //2.加工
- obj.name = name;
- obj.showName = function(){
- alert( this.name );
- };
- //3.出场
- return obj;
- }
- var p1 = createPerson('小明');
- p1.showName();
- var p2 = createPerson('小强');
- p2.showName();
- </script>
- </head>
- <body>
- </body>
- </html>
[html] view plain copy
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script>
- //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
- //new后面调用的函数 : 叫做构造函数
- function CreatePerson(name){
- this.name = name;
- this.showName = function(){
- alert( this.name );
- };
- }
- var p1 = new CreatePerson('小明');
- //p1.showName();
- var p2 = new CreatePerson('小强');
- //p2.showName();
- alert( p1.showName == p2.showName ); //false
- var arr = new Array();
- var date = new Date();
- </script>
- </head>
- <body>
- </body>
- </html>
对象的引用
[html] view plain copy
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script>
- /*var a = [1,2,3];
- var b = [1,2,3];
- alert( a == b ); //false*/
- //var a = 5;
- //var b = a;
- //b += 3;
- alert(b); //8
- //alert(a); //5 基本类型 : 赋值的时候只是值的复制
- //var a = [1,2,3];
- //var b = a;
- //b.push(4);
- alert(b); //[1,2,3,4]
- //alert(a); //[1,2,3,4] 对象类型 : 赋值不仅是值的复制,而且也是引用的传递
- //var a = [1,2,3];
- //var b = a;
- //b = [1,2,3,4];
- alert(b); //[1,2,3,4]
- //alert(a); //[1,2,3]
- //var a = 5;
- //var b = 5;
- //
- //alert(a == b); //基本类型 : 值相同就可以
- //var a = [1,2,3];
- //var b = [1,2,3];
- //alert( a == b ); //false //对象类型 : 值和引用都相同才行
- var a = [1,2,3];
- var b = a;
- alert( a==b ); //true
- </script>
- </head>
- <body>
- </body>
- </html>
原型
[html] view plain copy
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script>
- //原型 : 去改写对象下面公用的方法或者属性 , 让公用的方法或者属性在内存中存在一份 ( 提高性能 )
- //原型 : CSS中的class
- //普通方法 : CSS中的style
- //原型 : prototype : 要写在构造函数的下面
- /*var arr = [1,2,3,4,5];
- var arr2 = [2,2,2,2,2];
- arr.sum = function(){
- var result = 0;
- for(var i=0;i<this.length;i++){
- result += this[i];
- }
- return result;
- };
- arr2.sum = function(){
- var result = 0;
- for(var i=0;i<this.length;i++){
- result += this[i];
- }
- return result;
- };
- //alert( arr.sum() ); //15
- //alert( arr2.sum() ); //10*/
- var arr = [1,2,3,4,5];
- var arr2 = [2,2,2,2,2];
- Array.prototype.sum = function(){
- var result = 0;
- for(var i=0;i<this.length;i++){
- result += this[i];
- }
- return result;
- };
- alert( arr.sum() ); //15
- alert( arr2.sum() ); //10
- </script>
- </head>
- <body>
- </body>
- </html>
[html] view plain copy
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script>
- var arr = [];
- //arr.number = 10;
- Array.prototype.number = 20;
- alert(arr.number);
- </script>
- </head>
- <body>
- </body>
- </html>
工厂方法之原型
[html] view plain copy
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script>
- //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
- //new后面调用的函数 : 叫做构造函数
- function CreatePerson(name){
- this.name = name;
- }
- CreatePerson.prototype.showName = function(){
- alert( this.name );
- };
- var p1 = new CreatePerson('小明');
- //p1.showName();
- var p2 = new CreatePerson('小强');
- //p2.showName();
- alert( p1.showName == p2.showName ); //true
- var arr = new Array();
- var date = new Date();
- </script>
- </head>
- <body>
- </body>
- </html>
面向对象的写法
[html] view plain copy
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script>
- function 构造函数(){
- this.属性
- }
- 构造函数.原型.方法 = function(){};
- var 对象1 = new 构造函数();
- 对象1.方法();
- </script>
- </head>
- <body>
- </body>
- </html>
面向对象的选项卡
[html] view plain copy
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>无标题文档</title>
- <style>
- #div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
- .active{ background:red;}
- </style>
- <script>
- /*window.onload = function(){
- var oParent = document.getElementById('div1');
- var aInput = oParent.getElementsByTagName('input');
- var aDiv = oParent.getElementsByTagName('div');
- for(var i=0;i<aInput.length;i++){
- aInput[i].index = i;
- aInput[i].onclick = function(){
- for(var i=0;i<aInput.length;i++){
- aInput[i].className = '';
- aDiv[i].style.display = 'none';
- }
- this.className = 'active';
- aDiv[this.index].style.display = 'block';
- };
- }
- };*/
- //先变型:
- //尽量不要出现函数嵌套函数
- //可以有全局变量
- //把onload中不是赋值的语句放到单独函数中
- var oParent = null;
- var aInput = null;
- var aDiv = null;
- window.onload = function(){
- oParent = document.getElementById('div1');
- aInput = oParent.getElementsByTagName('input');
- aDiv = oParent.getElementsByTagName('div');
- init();
- };
- function init(){
- for(var i=0;i<aInput.length;i++){
- aInput[i].index = i;
- aInput[i].onclick = change;
- }
- }
- function change(){
- for(var i=0;i<aInput.length;i++){
- aInput[i].className = '';
- aDiv[i].style.display = 'none';
- }
- this.className = 'active';
- aDiv[this.index].style.display = 'block';
- }
- </script>
- </head>
- <body>
- <div id="div1">
- <input class="active" type="button" value="1">
- <input type="button" value="2">
- <input type="button" value="3">
- <div style="display:block">11111</div>
- <div>22222</div>
- <div>33333</div>
- </div>
- </body>
- </html>
[html] view plain copy
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>无标题文档</title>
- <style>
- #div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
- .active{ background:red;}
- </style>
- <script>
- /*window.onload = function(){
- var oParent = document.getElementById('div1');
- var aInput = oParent.getElementsByTagName('input');
- var aDiv = oParent.getElementsByTagName('div');
- for(var i=0;i<aInput.length;i++){
- aInput[i].index = i;
- aInput[i].onclick = function(){
- for(var i=0;i<aInput.length;i++){
- aInput[i].className = '';
- aDiv[i].style.display = 'none';
- }
- this.className = 'active';
- aDiv[this.index].style.display = 'block';
- };
- }
- };*/
- //先变型:
- //尽量不要出现函数嵌套函数
- //可以有全局变量
- //把onload中不是赋值的语句放到单独函数中
- /*var oParent = null;
- var aInput = null;
- var aDiv = null;
- window.onload = function(){
- oParent = document.getElementById('div1');
- aInput = oParent.getElementsByTagName('input');
- aDiv = oParent.getElementsByTagName('div');
- init();
- };
- function init(){
- for(var i=0;i<aInput.length;i++){
- aInput[i].index = i;
- aInput[i].onclick = change;
- }
- }
- function change(){
- for(var i=0;i<aInput.length;i++){
- aInput[i].className = '';
- aDiv[i].style.display = 'none';
- }
- this.className = 'active';
- aDiv[this.index].style.display = 'block';
- }*/
- //改成面向对象:
- //全局变量就是属性
- //函数就是方法
- //Onload中创建对象
- //改this指向问题 : 事件或者是定时器,尽量让面向对象中的this指向对象
- window.onload = function(){
- var t1 = new Tab();
- t1.init();
- };
- function Tab(){
- this.oParent = document.getElementById('div1');
- this.aInput = this.oParent.getElementsByTagName('input');
- this.aDiv = this.oParent.getElementsByTagName('div');
- }
- Tab.prototype.init = function(){
- var This = this;
- for(var i=0;i<this.aInput.length;i++){
- this.aInput[i].index = i;
- this.aInput[i].onclick = function(){
- This.change(this);
- };
- }
- };
- Tab.prototype.change = function(obj){
- for(var i=0;i<this.aInput.length;i++){
- this.aInput[i].className = '';
- this.aDiv[i].style.display = 'none';
- }
- obj.className = 'active';
- this.aDiv[obj.index].style.display = 'block';
- };
- </script>
- </head>
- <body>
- <div id="div1">
- <input class="active" type="button" value="1">
- <input type="button" value="2">
- <input type="button" value="3">
- <div style="display:block">11111</div>
- <div>22222</div>
- <div>33333</div>
- </div>
- </body>
- </html>
[html] view plain copy
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>无标题文档</title>
- <style>
- #div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
- .active{ background:red;}
- </style>
- <script>
- /*var arr = [4,7,1,3];
- arr.sort(); // 1 3 4 7
- var arr2 = [4,7,1,3];
- arr2.push(5);
- arr2.sort(); // 1 3 4 5 7
- */
- window.onload = function(){
- var t1 = new Tab('div1');
- t1.init();
- t1.autoPlay();
- var t2 = new Tab('div2');
- t2.init();
- t2.autoPlay();
- };
- function Tab(id){
- this.oParent = document.getElementById(id);
- this.aInput = this.oParent.getElementsByTagName('input');
- this.aDiv = this.oParent.getElementsByTagName('div');
- this.iNow = 0;
- }
- Tab.prototype.init = function(){
- var This = this;
- for(var i=0;i<this.aInput.length;i++){
- this.aInput[i].index = i;
- this.aInput[i].onclick = function(){
- This.change(this);
- };
- }
- };
- Tab.prototype.change = function(obj){
- for(var i=0;i<this.aInput.length;i++){
- this.aInput[i].className = '';
- this.aDiv[i].style.display = 'none';
- }
- obj.className = 'active';
- this.aDiv[obj.index].style.display = 'block';
- };
- Tab.prototype.autoPlay = function(){
- var This = this;
- setInterval(function(){
- if(This.iNow == This.aInput.length-1){
- This.iNow = 0;
- }
- else{
- This.iNow++;
- }
- for(var i=0;i<This.aInput.length;i++){
- This.aInput[i].className = '';
- This.aDiv[i].style.display = 'none';
- }
- This.aInput[This.iNow].className = 'active';
- This.aDiv[This.iNow].style.display = 'block';
- },2000);
- };
- </script>
- </head>
- <body>
- <div id="div1">
- <input class="active" type="button" value="1">
- <input type="button" value="2">
- <input type="button" value="3">
- <div style="display:block">11111</div>
- <div>22222</div>
- <div>33333</div>
- </div>
- <div id="div2">
- <input class="active" type="button" value="1">
- <input type="button" value="2">
- <input type="button" value="3">
- <div style="display:block">11111</div>
- <div>22222</div>
- <div>33333</div>
- </div>
- </body>
- </html>
面向对象的拖拽
[html] view plain copy
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>无标题文档</title>
- <style>
- #div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
- .active{ background:red;}
- </style>
- <script>
- /*var arr = [4,7,1,3];
- arr.sort(); // 1 3 4 7
- var arr2 = [4,7,1,3];
- arr2.push(5);
- arr2.sort(); // 1 3 4 5 7
- */
- window.onload = function(){
- var t1 = new Tab('div1');
- t1.init();
- t1.autoPlay();
- var t2 = new Tab('div2');
- t2.init();
- t2.autoPlay();
- };
- function Tab(id){
- this.oParent = document.getElementById(id);
- this.aInput = this.oParent.getElementsByTagName('input');
- this.aDiv = this.oParent.getElementsByTagName('div');
- this.iNow = 0;
- }
- Tab.prototype.init = function(){
- var This = this;
- for(var i=0;i<this.aInput.length;i++){
- this.aInput[i].index = i;
- this.aInput[i].onclick = function(){
- This.change(this);
- };
- }
- };
- Tab.prototype.change = function(obj){
- for(var i=0;i<this.aInput.length;i++){
- this.aInput[i].className = '';
- this.aDiv[i].style.display = 'none';
- }
- obj.className = 'active';
- this.aDiv[obj.index].style.display = 'block';
- };
- Tab.prototype.autoPlay = function(){
- var This = this;
- setInterval(function(){
- if(This.iNow == This.aInput.length-1){
- This.iNow = 0;
- }
- else{
- This.iNow++;
- }
- for(var i=0;i<This.aInput.length;i++){
- This.aInput[i].className = '';
- This.aDiv[i].style.display = 'none';
- }
- This.aInput[This.iNow].className = 'active';
- This.aDiv[This.iNow].style.display = 'block';
- },2000);
- };
- </script>
- </head>
- <body>
- <div id="div1">
- <input class="active" type="button" value="1">
- <input type="button" value="2">
- <input type="button" value="3">
- <div style="display:block">11111</div>
- <div>22222</div>
- <div>33333</div>
- </div>
- <div id="div2">
- <input class="active" type="button" value="1">
- <input type="button" value="2">
- <input type="button" value="3">
- <div style="display:block">11111</div>
- <div>22222</div>
- <div>33333</div>
- </div>
- </body>
- </html>
包装对象
[html] view plain copy
- <!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>
[html] view plain copy
- <!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 = 10;
- alert( str.number ); //undefined
- </script>
- </head>
- <body>
- </body>
- </html>
原型链
[html] view plain copy
- <!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 = 30;
- var a1 = new Aaa();
- alert(a1.num);
- </script>
- </head>
- <body>
- </body>
- </html>
hasOwnProperty
[html] view plain copy
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>无标题文档</title>
- <script>
- //hasOwnProperty : 看是不是对象自身下面的属性
- var arr = [];
- arr.num = 10;
- Array.prototype.num2 = 20;
- //alert( arr.hasOwnProperty('num') ); //true
- alert( arr.hasOwnProperty('num2') ); //false
- </script>
- </head>
- <body>
- </body>
- </html>
constructor
[html] view plain copy
- <!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 = 10;
- Aaa.prototype.constructor = Aaa;
- for( var attr in Aaa.prototype ){
- alert(attr);
- }
- </script>
- </head>
- <body>
- </body>
- </html>
instanceof
[html] view plain copy
- <!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>
toString
[html] view plain copy
- <!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[0].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>
继承
[html] view plain copy
- <!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>
对象的复制
[html] view plain copy
- <!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>
继承的拖拽
[html] view plain copy
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>无标题文档</title>
- <style>
- #div1{ width:100px; height:100px; background:red; position:absolute;}
- #div2{ width:100px; height:100px; background:yellow; position:absolute; left:100px;}
- </style>
- <script>
- window.onload = function(){
- var d1 = new Drag('div1');
- d1.init();
- var d2 = new ChildDrag('div2');
- d2.init();
- };
- function Drag(id){ //父类
- this.obj = document.getElementById(id);
- this.disX = 0;
- this.disY = 0;
- }
- Drag.prototype.init = function(){
- var This = this;
- this.obj.onmousedown = function(ev){
- var ev = ev || window.event;
- This.fnDown(ev);
- document.onmousemove = function(ev){
- var ev = ev || window.event;
- This.fnMove(ev);
- };
- document.onmouseup = function(){
- This.fnUp();
- };
- return false;
- };
- };
- Drag.prototype.fnDown = function(ev){
- this.disX = ev.clientX - this.obj.offsetLeft;
- this.disY = ev.clientY - this.obj.offsetTop;
- };
- Drag.prototype.fnMove = function(ev){
- this.obj.style.left = ev.clientX - this.disX + 'px';
- this.obj.style.top = ev.clientY - this.disY + 'px';
- };
- Drag.prototype.fnUp = function(){
- document.onmousemove = null;
- document.onmouseup = null;
- };
- function ChildDrag(id){ //子类
- Drag.call(this,id);
- }
- extend( ChildDrag.prototype , Drag.prototype );
- ChildDrag.prototype.fnMove = function(ev){
- var L = ev.clientX - this.disX;
- var T = ev.clientY - this.disY;
- if(L<0){
- L = 0;
- }
- else if(L>document.documentElement.clientWidth - this.obj.offsetWidth){
- L = document.documentElement.clientWidth - this.obj.offsetWidth;
- }
- this.obj.style.left = L + 'px';
- this.obj.style.top = T + 'px';
- };
- function extend(obj1,obj2){
- for(var attr in obj2){
- obj1[attr] = obj2[attr];
- }
- }
- </script>
- </head>
- <body>
- <div id="div1"></div>
- <div id="div2"></div>
- </body>
- </html>
类式继承
[html] view plain copy
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>无标题文档</title>
- <script>
- //类 : JS是没有类的概念的 , 把JS中的构造函数看做的类
- //要做属性和方法继承的时候,要分开继承
- function Aaa(){ //父类
- this.name = [1,2,3];
- }
- Aaa.prototype.showName = function(){
- alert( this.name );
- };
- function Bbb(){ //子类
- Aaa.call(this);
- }
- var F = function(){};
- F.prototype = Aaa.prototype;
- Bbb.prototype = new F();
- Bbb.prototype.constructor = Bbb; //修正指向问题
- var b1 = new Bbb();
- //b1.showName();
- //alert( b1.name );
- //alert( b1.constructor );
- b1.name.push(4);
- var b2 = new Bbb();
- alert( b2.name );
- </script>
- </head>
- <body>
- </body>
- </html>
原型继承
[html] view plain copy
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>无标题文档</title>
- <script>
- var a = {
- name : '小明'
- };
- var b = cloneObj(a);
- b.name = '小强';
- //alert( b.name );
- alert( a.name );
- function cloneObj(obj){
- var F = function(){};
- F.prototype = obj;
- return new F();
- }
- 拷贝继承: 通用型的 有new或无new的时候都可以
- 类式继承: new构造函数
- 原型继承: 无new的对象
- </script>
- </head>
- <body>
- </body>
- </html>