js面向对象高级编程

js面向对象高级编程
面向对象的组成
[html] view plain copy
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>无标题文档</title>
6. <script>
8. var arr = [];
10. arr.number = 10; //对象下面的变量：叫做对象的属性
12. //alert( arr.number );
13. //alert( arr.length );
15. arr.test = function(){ //对象下面的函数 : 叫做对象的方法
16. alert(123);
17. };
19. arr.test();
21. arr.push();
22. arr.sort();
24. </script>
25. </head>
27. <body>
28. </body>
29. </html>
创建第一个面向对象程序
[html] view plain copy
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>无标题文档</title>
6. <script>
8. //var obj = {};
10. var obj = new Object(); //创建了一个空的对象
11. obj.name = '小明'; //属性
12. obj.showName = function(){ //方法
13. alert(this.name);
14. };
16. obj.showName();
19. var obj2 = new Object(); //创建了一个空的对象
20. obj2.name = '小强'; //属性
21. obj2.showName = function(){ //方法
22. alert(this.name);
23. };
25. obj2.showName();
29. </script>
30. </head>
32. <body>
33. </body>
34. </html>
工厂方式
[html] view plain copy
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>无标题文档</title>
6. <script>
8. //工厂方式 : 封装函数
10. function createPerson(name){
12. //1.原料
13. var obj = new Object();
14. //2.加工
15. obj.name = name;
16. obj.showName = function(){
17. alert( this.name );
18. };
19. //3.出场
20. return obj;
22. }
24. var p1 = createPerson('小明');
25. p1.showName();
26. var p2 = createPerson('小强');
27. p2.showName();
29. </script>
30. </head>
32. <body>
33. </body>
34. </html>
[html] view plain copy
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>无标题文档</title>
6. <script>
9. //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
11. //new后面调用的函数 : 叫做构造函数
13. function CreatePerson(name){
15. this.name = name;
16. this.showName = function(){
17. alert( this.name );
18. };
20. }
22. var p1 = new CreatePerson('小明');
23. //p1.showName();
24. var p2 = new CreatePerson('小强');
25. //p2.showName();
27. alert( p1.showName == p2.showName ); //false
29. var arr = new Array();
30. var date = new Date();
32. </script>
33. </head>
35. <body>
36. </body>
37. </html>
对象的引用
[html] view plain copy
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>无标题文档</title>
6. <script>
8. /*var a = [1,2,3];
9. var b = [1,2,3];
11. alert( a == b ); //false*/
13. //var a = 5;
14. //var b = a;
15. //b += 3;
16. ////alert(b); //8
17. //alert(a); //5 基本类型 : 赋值的时候只是值的复制
20. //var a = [1,2,3];
21. //var b = a;
22. //b.push(4);
23. ////alert(b); //[1,2,3,4]
24. //alert(a); //[1,2,3,4] 对象类型 : 赋值不仅是值的复制，而且也是引用的传递
26. //var a = [1,2,3];
27. //var b = a;
28. //b = [1,2,3,4];
29. ////alert(b); //[1,2,3,4]
30. //alert(a); //[1,2,3]
32. //var a = 5;
33. //var b = 5;
34. //
35. //alert(a == b); //基本类型 : 值相同就可以
38. //var a = [1,2,3];
39. //var b = [1,2,3];
41. //alert( a == b ); //false //对象类型 : 值和引用都相同才行
43. var a = [1,2,3];
44. var b = a;
45. alert( a==b ); //true
47. </script>
48. </head>
50. <body>
51. </body>
52. </html>
原型
[html] view plain copy
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>无标题文档</title>
6. <script>
8. //原型 : 去改写对象下面公用的方法或者属性 , 让公用的方法或者属性在内存中存在一份 ( 提高性能 )
10. //原型 : CSS中的class
11. //普通方法 : CSS中的style
13. //原型 : prototype : 要写在构造函数的下面
15. /*var arr = [1,2,3,4,5];
16. var arr2 = [2,2,2,2,2];
18. arr.sum = function(){
20. var result = 0;
21. for(var i=0;i<this.length;i++){
22. result += this[i];
23. }
24. return result;
26. };
27. arr2.sum = function(){
29. var result = 0;
30. for(var i=0;i<this.length;i++){
31. result += this[i];
32. }
33. return result;
35. };
37. //alert( arr.sum() ); //15
38. //alert( arr2.sum() ); //10*/
40. var arr = [1,2,3,4,5];
41. var arr2 = [2,2,2,2,2];
43. Array.prototype.sum = function(){
44. var result = 0;
45. for(var i=0;i<this.length;i++){
46. result += this[i];
47. }
48. return result;
49. };
51. alert( arr.sum() ); //15
52. alert( arr2.sum() ); //10
54. </script>
55. </head>
57. <body>
58. </body>
59. </html>
[html] view plain copy
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>无标题文档</title>
6. <script>
8. var arr = [];
9. //arr.number = 10;
10. Array.prototype.number = 20;
12. alert(arr.number);
14. </script>
15. </head>
17. <body>
18. </body>
19. </html>
工厂方法之原型
[html] view plain copy
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>无标题文档</title>
6. <script>
9. //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
11. //new后面调用的函数 : 叫做构造函数
13. function CreatePerson(name){
15. this.name = name;
17. }
18. CreatePerson.prototype.showName = function(){
19. alert( this.name );
20. };
22. var p1 = new CreatePerson('小明');
23. //p1.showName();
24. var p2 = new CreatePerson('小强');
25. //p2.showName();
27. alert( p1.showName == p2.showName ); //true
29. var arr = new Array();
30. var date = new Date();
32. </script>
33. </head>
35. <body>
36. </body>
37. </html>
面向对象的写法
[html] view plain copy
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>无标题文档</title>
6. <script>
8. function 构造函数(){
9. this.属性
10. }
12. 构造函数.原型.方法 = function(){};
15. var 对象1 = new 构造函数();
16. 对象1.方法();
17. </script>
18. </head>
20. <body>
21. </body>
22. </html>
面向对象的选项卡
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <style>
7. #div1 div{ 200px; height:200px; border:1px #000 solid; display:none;}
8. .active{ background:red;}
9. </style>
10. <script>
12. /*window.onload = function(){
13. var oParent = document.getElementById('div1');
14. var aInput = oParent.getElementsByTagName('input');
15. var aDiv = oParent.getElementsByTagName('div');
17. for(var i=0;i<aInput.length;i++){
18. aInput[i].index = i;
19. aInput[i].onclick = function(){
20. for(var i=0;i<aInput.length;i++){
21. aInput[i].className = '';
22. aDiv[i].style.display = 'none';
23. }
24. this.className = 'active';
25. aDiv[this.index].style.display = 'block';
26. };
27. }
29. };*/
31. //先变型:
32. //尽量不要出现函数嵌套函数
33. //可以有全局变量
34. //把onload中不是赋值的语句放到单独函数中
37. var oParent = null;
38. var aInput = null;
39. var aDiv = null;
41. window.onload = function(){
43. oParent = document.getElementById('div1');
44. aInput = oParent.getElementsByTagName('input');
45. aDiv = oParent.getElementsByTagName('div');
47. init();
49. };
51. function init(){
52. for(var i=0;i<aInput.length;i++){
53. aInput[i].index = i;
54. aInput[i].onclick = change;
55. }
56. }
58. function change(){
59. for(var i=0;i<aInput.length;i++){
60. aInput[i].className = '';
61. aDiv[i].style.display = 'none';
62. }
63. this.className = 'active';
64. aDiv[this.index].style.display = 'block';
65. }
67. </script>
68. </head>
70. <body>
71. <div id="div1">
72. <input class="active" type="button" value="1">
73. <input type="button" value="2">
74. <input type="button" value="3">
75. <div style="display:block">11111</div>
76. <div>22222</div>
77. <div>33333</div>
78. </div>
79. </body>
80. </html>
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <style>
7. #div1 div{ 200px; height:200px; border:1px #000 solid; display:none;}
8. .active{ background:red;}
9. </style>
10. <script>
12. /*window.onload = function(){
13. var oParent = document.getElementById('div1');
14. var aInput = oParent.getElementsByTagName('input');
15. var aDiv = oParent.getElementsByTagName('div');
17. for(var i=0;i<aInput.length;i++){
18. aInput[i].index = i;
19. aInput[i].onclick = function(){
20. for(var i=0;i<aInput.length;i++){
21. aInput[i].className = '';
22. aDiv[i].style.display = 'none';
23. }
24. this.className = 'active';
25. aDiv[this.index].style.display = 'block';
26. };
27. }
29. };*/
31. //先变型:
32. //尽量不要出现函数嵌套函数
33. //可以有全局变量
34. //把onload中不是赋值的语句放到单独函数中
37. /*var oParent = null;
38. var aInput = null;
39. var aDiv = null;
41. window.onload = function(){
43. oParent = document.getElementById('div1');
44. aInput = oParent.getElementsByTagName('input');
45. aDiv = oParent.getElementsByTagName('div');
47. init();
49. };
51. function init(){
52. for(var i=0;i<aInput.length;i++){
53. aInput[i].index = i;
54. aInput[i].onclick = change;
55. }
56. }
58. function change(){
59. for(var i=0;i<aInput.length;i++){
60. aInput[i].className = '';
61. aDiv[i].style.display = 'none';
62. }
63. this.className = 'active';
64. aDiv[this.index].style.display = 'block';
65. }*/
67. //改成面向对象:
68. //全局变量就是属性
69. //函数就是方法
70. //Onload中创建对象
72. //改this指向问题 : 事件或者是定时器,尽量让面向对象中的this指向对象
74. window.onload = function(){
76. var t1 = new Tab();
77. t1.init();
79. };
81. function Tab(){
82. this.oParent = document.getElementById('div1');
83. this.aInput = this.oParent.getElementsByTagName('input');
84. this.aDiv = this.oParent.getElementsByTagName('div');
85. }
87. Tab.prototype.init = function(){
88. var This = this;
89. for(var i=0;i<this.aInput.length;i++){
90. this.aInput[i].index = i;
91. this.aInput[i].onclick = function(){
92. This.change(this);
93. };
94. }
95. };
97. Tab.prototype.change = function(obj){
98. for(var i=0;i<this.aInput.length;i++){
99. this.aInput[i].className = '';
100. this.aDiv[i].style.display = 'none';
101. }
102. obj.className = 'active';
103. this.aDiv[obj.index].style.display = 'block';
104. };
106. </script>
107. </head>
109. <body>
110. <div id="div1">
111. <input class="active" type="button" value="1">
112. <input type="button" value="2">
113. <input type="button" value="3">
114. <div style="display:block">11111</div>
115. <div>22222</div>
116. <div>33333</div>
117. </div>
118. </body>
119. </html>
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <style>
7. #div1 div,#div2 div{ 200px; height:200px; border:1px #000 solid; display:none;}
8. .active{ background:red;}
9. </style>
10. <script>
12. /*var arr = [4,7,1,3];
13. arr.sort(); // 1 3 4 7
15. var arr2 = [4,7,1,3];
16. arr2.push(5);
17. arr2.sort(); // 1 3 4 5 7
18. */
20. window.onload = function(){
22. var t1 = new Tab('div1');
23. t1.init();
24. t1.autoPlay();
26. var t2 = new Tab('div2');
27. t2.init();
28. t2.autoPlay();
30. };
32. function Tab(id){
33. this.oParent = document.getElementById(id);
34. this.aInput = this.oParent.getElementsByTagName('input');
35. this.aDiv = this.oParent.getElementsByTagName('div');
36. this.iNow = 0;
37. }
39. Tab.prototype.init = function(){
40. var This = this;
41. for(var i=0;i<this.aInput.length;i++){
42. this.aInput[i].index = i;
43. this.aInput[i].onclick = function(){
44. This.change(this);
45. };
46. }
47. };
49. Tab.prototype.change = function(obj){
50. for(var i=0;i<this.aInput.length;i++){
51. this.aInput[i].className = '';
52. this.aDiv[i].style.display = 'none';
53. }
54. obj.className = 'active';
55. this.aDiv[obj.index].style.display = 'block';
56. };
58. Tab.prototype.autoPlay = function(){
60. var This = this;
62. setInterval(function(){
64. if(This.iNow == This.aInput.length-1){
65. This.iNow = 0;
66. }
67. else{
68. This.iNow++;
69. }
71. for(var i=0;i<This.aInput.length;i++){
72. This.aInput[i].className = '';
73. This.aDiv[i].style.display = 'none';
74. }
75. This.aInput[This.iNow].className = 'active';
76. This.aDiv[This.iNow].style.display = 'block';
79. },2000);
81. };
83. </script>
84. </head>
86. <body>
87. <div id="div1">
88. <input class="active" type="button" value="1">
89. <input type="button" value="2">
90. <input type="button" value="3">
91. <div style="display:block">11111</div>
92. <div>22222</div>
93. <div>33333</div>
94. </div>
96. <div id="div2">
97. <input class="active" type="button" value="1">
98. <input type="button" value="2">
99. <input type="button" value="3">
100. <div style="display:block">11111</div>
101. <div>22222</div>
102. <div>33333</div>
103. </div>
104. </body>
105. </html>
面向对象的拖拽
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <style>
7. #div1 div,#div2 div{ 200px; height:200px; border:1px #000 solid; display:none;}
8. .active{ background:red;}
9. </style>
10. <script>
12. /*var arr = [4,7,1,3];
13. arr.sort(); // 1 3 4 7
15. var arr2 = [4,7,1,3];
16. arr2.push(5);
17. arr2.sort(); // 1 3 4 5 7
18. */
20. window.onload = function(){
22. var t1 = new Tab('div1');
23. t1.init();
24. t1.autoPlay();
26. var t2 = new Tab('div2');
27. t2.init();
28. t2.autoPlay();
30. };
32. function Tab(id){
33. this.oParent = document.getElementById(id);
34. this.aInput = this.oParent.getElementsByTagName('input');
35. this.aDiv = this.oParent.getElementsByTagName('div');
36. this.iNow = 0;
37. }
39. Tab.prototype.init = function(){
40. var This = this;
41. for(var i=0;i<this.aInput.length;i++){
42. this.aInput[i].index = i;
43. this.aInput[i].onclick = function(){
44. This.change(this);
45. };
46. }
47. };
49. Tab.prototype.change = function(obj){
50. for(var i=0;i<this.aInput.length;i++){
51. this.aInput[i].className = '';
52. this.aDiv[i].style.display = 'none';
53. }
54. obj.className = 'active';
55. this.aDiv[obj.index].style.display = 'block';
56. };
58. Tab.prototype.autoPlay = function(){
60. var This = this;
62. setInterval(function(){
64. if(This.iNow == This.aInput.length-1){
65. This.iNow = 0;
66. }
67. else{
68. This.iNow++;
69. }
71. for(var i=0;i<This.aInput.length;i++){
72. This.aInput[i].className = '';
73. This.aDiv[i].style.display = 'none';
74. }
75. This.aInput[This.iNow].className = 'active';
76. This.aDiv[This.iNow].style.display = 'block';
79. },2000);
81. };
83. </script>
84. </head>
86. <body>
87. <div id="div1">
88. <input class="active" type="button" value="1">
89. <input type="button" value="2">
90. <input type="button" value="3">
91. <div style="display:block">11111</div>
92. <div>22222</div>
93. <div>33333</div>
94. </div>
96. <div id="div2">
97. <input class="active" type="button" value="1">
98. <input type="button" value="2">
99. <input type="button" value="3">
100. <div style="display:block">11111</div>
101. <div>22222</div>
102. <div>33333</div>
103. </div>
104. </body>
105. </html>
包装对象
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <script>
8. /*function Aaa(){
9. this.name = '小明';
10. }
11. Aaa.prototype.showName = function(){
12. alert( this.name );
13. };
15. var a1 = new Aaa();
16. a1.showName();
19. var arr = new Array();
20. arr.push();
21. arr.sort();
23. //在JS源码 : 系统对象也是基于原型的程序
25. function Array(){
26. this.lenglth = 0;
27. }
28. Array.prototype.push = function(){};
29. Array.prototype.sort = function(){};*/
32. //尽量不要去修改或者添加系统对象下面的方法和属性
34. var arr = [1,2,3];
36. Array.prototype.push = function(){
38. //this : 1,2,3
39. //arguments : 4,5,6
41. for(var i=0;i<arguments.length;i++){
42. this[this.length] = arguments[i]
43. }
45. return this.length;
46. };
48. arr.push(4,5,6);
50. alert( arr );
52. //pop shift unshift splice sort
54. </script>
55. </head>
57. <body>
58. </body>
59. </html>
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <script>
8. /*var str = 'hello';
10. alert( typeof str );
12. str.charAt(0);
13. str.indexOf('e');*/
15. //null undefined
16. //包装对象 : 基本类型都有自己对应的包装对象 : String Number Boolean
18. /*var str = new String('hello');
20. //alert( typeof str );
22. alert(str.charAt(1));
24. String.prototype.charAt = function(){};*/
28. //var str = 'hello';
29. //str.charAt(0); //基本类型会找到对应的包装对象类型，然后包装对象把所有的属性和方法给了基本类型，然后包装对象消失
32. /*var str = 'hello';
34. String.prototype.lastValue = function(){
35. return this.charAt(this.length-1);
36. };
38. alert( str.lastValue() ); //o*/
41. var str = 'hello';
43. str.number = 10;
45. alert( str.number ); //undefined
47. </script>
48. </head>
50. <body>
51. </body>
52. </html>
原型链
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <script>
8. //原型链 : 实例对象与原型之间的连接，叫做原型链
10. //原型链的最外层 : Object.prototype
12. function Aaa(){
13. //this.num = 20;
14. }
15. //Aaa.prototype.num = 10;
16. Object.prototype.num = 30;
18. var a1 = new Aaa();
19. alert(a1.num);
21. </script>
22. </head>
24. <body>
25. </body>
26. </html>
hasOwnProperty
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <script>
8. //hasOwnProperty : 看是不是对象自身下面的属性
10. var arr = [];
11. arr.num = 10;
12. Array.prototype.num2 = 20;
14. //alert( arr.hasOwnProperty('num') ); //true
16. alert( arr.hasOwnProperty('num2') ); //false
20. </script>
21. </head>
23. <body>
24. </body>
25. </html>
constructor
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <script>
8. //constructor : 查看对象的构造函数
10. /*function Aaa(){
11. }
13. var a1 = new Aaa();
15. alert( a1.constructor ); //Aaa
17. var arr = [];
18. alert( arr.constructor == Array ); //true*/
21. /*function Aaa(){
22. }
23. //Aaa.prototype.constructor = Aaa; //每一个函数都会有的，都是自动生成的
25. //Aaa.prototype.constructor = Array;
27. var a1 = new Aaa();
28. alert( a1.hasOwnProperty == Object.prototype.hasOwnProperty ); //true*/
31. /*function Aaa(){
32. }
34. Aaa.prototype.name = '小明';
35. Aaa.prototype.age = 20;
37. Aaa.prototype = {
38. constructor : Aaa,
39. name : '小明',
40. age : 20
41. };
43. var a1 = new Aaa();
44. alert( a1.constructor );*/
47. function Aaa(){
48. }
50. Aaa.prototype.name = 10;
51. Aaa.prototype.constructor = Aaa;
53. for( var attr in Aaa.prototype ){
54. alert(attr);
55. }
57. </script>
58. </head>
60. <body>
61. </body>
62. </html>
instanceof
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <script>
8. //instanceof : 对象与构造函数在原型链上是否有关系
10. function Aaa(){
11. }
13. var a1 = new Aaa();
15. //alert( a1 instanceof Object ); //true
18. var arr = [];
20. alert( arr instanceof Array );
22. </script>
23. </head>
25. <body>
26. </body>
27. </html>
toString
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <script>
8. //toString() : 系统对象下面都是自带的 , 自己写的对象都是通过原型链找object下面的
10. /*var arr = [];
11. alert( arr.toString == Object.prototype.toString ); //false*/
13. /*function Aaa(){
14. }
15. var a1 = new Aaa();
16. alert( a1.toString == Object.prototype.toString ); //true*/
19. //toString() : 把对象转成字符串
21. /*var arr = [1,2,3];
23. Array.prototype.toString = function(){
24. return this.join('+');
25. };
27. alert( arr.toString() ); //'1,2,3'*/
30. //var num = 255;
31. //alert( num.toString(16) ); //'ff'
34. //利用toString做类型的判断 :
36. /*var arr = [];
38. alert( Object.prototype.toString.call(arr) == '[object Array]' ); */ //'[object Array]'
40. window.onload = function(){
42. var oF = document.createElement('iframe');
43. document.body.appendChild( oF );
45. var ifArray = window.frames[0].Array;
47. var arr = new ifArray();
49. //alert( arr.constructor == Array ); //false
51. //alert( arr instanceof Array ); //false
53. alert( Object.prototype.toString.call(arr) == '[object Array]' ); //true
56. };
58. </script>
59. </head>
61. <body>
62. </body>
63. </html>
继承
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <script>
8. //继承 : 子类不影响父类，子类可以继承父类的一些功能 ( 代码复用 )
10. //属性的继承 : 调用父类的构造函数 call
12. //方法的继承 : for in : 拷贝继承 (jquery也是采用拷贝继承extend)
14. function CreatePerson(name,sex){ //父类
15. this.name = name;
16. this.sex = sex;
17. }
18. CreatePerson.prototype.showName = function(){
19. alert( this.name );
20. };
22. var p1 = new CreatePerson('小明','男');
23. //p1.showName();
26. function CreateStar(name,sex,job){ //子类
28. CreatePerson.call(this,name,sex);
30. this.job = job;
32. }
34. //CreateStar.prototype = CreatePerson.prototype;
36. extend( CreateStar.prototype , CreatePerson.prototype );
38. CreateStar.prototype.showJob = function(){
39. };
41. var p2 = new CreateStar('黄晓明','男','演员');
43. p2.showName();
46. function extend(obj1,obj2){
47. for(var attr in obj2){
48. obj1[attr] = obj2[attr];
49. }
50. }
51. </script>
52. </head>
54. <body>
55. </body>
56. </html>
对象的复制
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <script>
8. /*var a = {
9. name : '小明'
10. };
12. var b = a;
14. b.name = '小强';
16. alert( a.name );*/
19. /*var a = {
20. name : '小明'
21. };
23. //var b = a;
25. var b = {};
27. extend( b , a );
29. b.name = '小强';
31. alert( a.name );
34. function extend(obj1,obj2){
35. for(var attr in obj2){
36. obj1[attr] = obj2[attr];
37. }
38. }*/
41. var a = [1,2,3];
42. var b = a;
43. //b.push(4);
45. b = [1,2,3,4];
47. alert(a);
49. </script>
50. </head>
52. <body>
53. </body>
54. </html>
继承的拖拽
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <style>
7. #div1{ 100px; height:100px; background:red; position:absolute;}
8. #div2{ 100px; height:100px; background:yellow; position:absolute; left:100px;}
9. </style>
10. <script>
12. window.onload = function(){
13. var d1 = new Drag('div1');
14. d1.init();
16. var d2 = new ChildDrag('div2');
17. d2.init();
18. };
20. function Drag(id){ //父类
21. this.obj = document.getElementById(id);
22. this.disX = 0;
23. this.disY = 0;
24. }
25. Drag.prototype.init = function(){
27. var This = this;
29. this.obj.onmousedown = function(ev){
30. var ev = ev || window.event;
31. This.fnDown(ev);
33. document.onmousemove = function(ev){
34. var ev = ev || window.event;
35. This.fnMove(ev);
36. };
37. document.onmouseup = function(){
38. This.fnUp();
39. };
40. return false;
41. };
43. };
45. Drag.prototype.fnDown = function(ev){
46. this.disX = ev.clientX - this.obj.offsetLeft;
47. this.disY = ev.clientY - this.obj.offsetTop;
48. };
49. Drag.prototype.fnMove = function(ev){
50. this.obj.style.left = ev.clientX - this.disX + 'px';
51. this.obj.style.top = ev.clientY - this.disY + 'px';
52. };
53. Drag.prototype.fnUp = function(){
54. document.onmousemove = null;
55. document.onmouseup = null;
56. };
59. function ChildDrag(id){ //子类
60. Drag.call(this,id);
61. }
63. extend( ChildDrag.prototype , Drag.prototype );
65. ChildDrag.prototype.fnMove = function(ev){
67. var L = ev.clientX - this.disX;
68. var T = ev.clientY - this.disY;
70. if(L<0){
71. L = 0;
72. }
73. else if(L>document.documentElement.clientWidth - this.obj.offsetWidth){
74. L = document.documentElement.clientWidth - this.obj.offsetWidth;
75. }
77. this.obj.style.left = L + 'px';
78. this.obj.style.top = T + 'px';
79. };
81. function extend(obj1,obj2){
82. for(var attr in obj2){
83. obj1[attr] = obj2[attr];
84. }
85. }
87. </script>
88. </head>
90. <body>
91. <div id="div1"></div>
92. <div id="div2"></div>
93. </body>
94. </html>
类式继承
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <title>无标题文档</title>
6. <script>
8. //类 : JS是没有类的概念的 , 把JS中的构造函数看做的类
10. //要做属性和方法继承的时候，要分开继承
12. function Aaa(){ //父类
13. this.name = [1,2,3];
14. }
15. Aaa.prototype.showName = function(){
16. alert( this.name );
17. };
19. function Bbb(){ //子类
21. Aaa.call(this);
23. }
25. var F = function(){};
26. F.prototype = Aaa.prototype;
27. Bbb.prototype = new F();
28. Bbb.prototype.constructor = Bbb; //修正指向问题
30. var b1 = new Bbb();
31. //b1.showName();
32. //alert( b1.name );
33. //alert( b1.constructor );
34. b1.name.push(4);
36. var b2 = new Bbb();
38. alert( b2.name );
42. </script>
43. </head>
45. <body>
46. </body>
47. </html>
原型继承
[html] view plain copy
相关阅读:
10个最常见的JS错误
 有哪些新手程序员不知道的小技巧？
有哪些新手程序员不知道的小技巧？
有哪些新手程序员不知道的小技巧？
有哪些新手程序员不知道的小技巧？
有哪些新手程序员不知道的小技巧？
有哪些新手程序员不知道的小技巧？
EF 传递的主键值的数量必须与实体上定义的主键值的数量匹配原因
 ACM2054_A=B
五一游记
原文地址：https://www.cnblogs.com/chenhuichao/p/7657062.html