兰州网站建设哪家好,响应网站建设,企业网站 三合一,做搞机网站Javascript面向对象#xff1a;函数#xff1a; * Arguments对象#xff1a; * Arguments对象是数组对象 * Arguments对象的length属性可以获取参数的个数 * 利用Arguments对象模拟函数的重载效果#xff08;javascript中不存在函…Javascript面向对象函数 * Arguments对象 * Arguments对象是数组对象 * Arguments对象的length属性可以获取参数的个数 * 利用Arguments对象模拟函数的重载效果javascript中不存在函数重载 * 变量的作用域 * 全局变量与局部变量 * 全局变量全局域与函数域局部域 * 局部变量当前函数域 * 全局域与函数域 * 定义局部变量时不使用var局部变量变成全局变量 * 定义全局变量与局部变量同名时函数域中只能访问局部变量 * 几种特殊函数 * 匿名函数没有名的函数 javascript可以将函数作为数据使用。作为函数本体它像普通的数据一样不一定要有名字。默认名字的函数被称之为“匿名函数”。例如function (a){return a;}匿名函数的两种用法可以将匿名函数作为参数传递给其他函数。这样接收方函数就能利用所传递的函数来完成某些事情。可以定义某个匿名函数来执行某些一次性任务 * 回调函数把一个函数作为参数传递给另一个函数而作为参数的函数叫做回调函数 1 function add(a, b){2 return a() b();3 }4 var one function(){return 1;}5 var two function(){return 2;}6 alert(add(one,two)); //output 37 8 //可以直接使用匿名函数来替代one()和two()以作为目标函数的参数9 alert(add(function(){return 1;}, function(){return 2;}));
10 在这个例子中函数one和two都是回调函数。
11 当将函数A传递给函数B并由B来执行A时A就成了一个回调函数callback function。如果A还是一个无名函数就称之为匿名回调函数。
12 回调函数的优点
13 它可以在不做命名的情况下传递函数这意味着可以节省全局变量。
14 可以将一个函数调用操作委托给另一个函数这意味着可以节省一些代码编写工作。
15 回调函数也有助于提升性能。(重要)
16 下面的代码利用回调函数如何优化
17 //该函数通过一个循环将其所接收的三个参数分别乘以2并以数组的形式返回结果
18 function two(a, b, c){
19 var i, arr [];
20 for(i 0;i 3; i){
21 arr[i] arguments[i] * 2;
22 }
23 return arr;
24 }
25
26 //将接收的参数加一后返回
27 function addone(a){
28 return a 1;
29 }
30
31 //测试上面的两个函数
32 alert(two(1, 2, 3)); //output [2, 4, 6]
33 alert(addone(100)); //output 101
34
35 //将三个数据在两个函数之间传递
36 var myarr [];
37 myarr two(10, 20, 30);
38 for(var i 0; i 3; i){
39 myarr[i] addone(myarr[i]);
40 }
41 alert(myarr); //output [21, 41, 61]
42 /*
43 * 以上代码可以工作但是显然不够优化。
44 * 这里使用了两次循环。如果处理的数据量很大火循环操作很复杂的话开销一定不小。
45 */
46
47 //优化之后的代码(修改two函数)
48 function two(a, b, c, callback){
49 var i, arr [];
50 for(i 0;i 3; i){
51 arr[i] callback(arguments[i] * 2);
52 }
53 return arr;
54 }
55
56 myarr two(1, 2, 3, addone);
57 alert(myarr); //output [3, 5, 7]
58
59 //还可以使用匿名函数来替代addone函数
60 myarr two(1, 2, 3, function addone(a){return a 1;}); 回调函数.html * 自调函数定义即调用 * 第一个小括号封装函数 * 第二个小括号调用函数传参 1 自调函数2 自调函数 —— 其实就是在定义函数后自行调用。例如3 (4 function(){5 alert(javascript);6 }7 )()8 第一对括号放置的是一个匿名函数。9 第二对括号的作用是“立即调用”。
10 自调函数只需将匿名函数的定义放进一对括号中然后外面再跟一对括号即可。
11
12 function(name){
13 alert(Hello name !);
14 }
15 )(javascript)
16 //output Hello javascript!
17 第一个括号中的匿名函数接受一个参数。
18 第二个括号在调用时向匿名函数传递参数内容。 自调函数.html * 内部函数Java中的内部类提高安全性 1 内部私有函数2 function a(param){3 function b(input){4 return input * 2;5 };6 return The result is b(param);7 }8 9 alert(a(2)); //The result is 4
10 当调用全局函数a ( ) 时本地函数b ( ) 也会在其内部被调用。由于b ( ) 是本地函数
11 它在a ( ) 以外的地方是不可见的所以将b 称之为私有函数。
12 私有函数的优点
13 有助于确保全局名字空间的纯净性这意味着命名冲突的机会很小。
14 私有性 —— 只将一些必要的函数暴露给“外面世界”并保留属于自己的函数使它们不为该应用程序的其他部分所用。 内部函数.html * 返回函数的函数 1 !DOCTYPE html2 html3 head4 title01_几种特殊函数.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 /*
19 * 内部(私有)函数(Java里内部类)
20 * * 保证了私有性 —— 外部不能访问不到(提供了安全性)
21 */
22 // function fn(){
23 // var a a;
24 //
25 // function n(){
26 // var b b;
27 //
28 // alert(ab); //output ab
29 // }
30 //
31 // return n();
32 // }
33 //
34 // fn(); //output ab
35
36 /*
37 * (了解)返回函数的函数(内部函数的一种特殊用法)
38 * * 可以在全局域中,访问到局部变量的值
39 * * 定义一个函数时,最终执行两个逻辑代码块
40 */
41 function fn(){
42 //逻辑代码块
43 var a a;
44
45 return function(){
46 //逻辑代码块
47 return a;
48 }
49 }
50
51 alert(fn()); //output function(){return a;}
52
53 //var fun fn();
54 //var fun function(){return a;}
55
56 //alert(fun()); //output a
57
58 alert(fn()()); //output a
59
60 /*
61 * javascript中的特殊函数,不是必要使用的内容
62 * * 第一次完成实现逻辑内容时,很少会用到特殊函数
63 * * 在做代码优化的时候,会使用特殊函数
64 *
65 * 代码实现:一次性做到代码最优
66 * * 实现逻辑内容
67 * * 代码优化
68 */
69
70 /script
71 /html 返回函数的函数.html 作用域链 1 javascript不存在大括号级的作用域但具有函数作用域。2 在函数内定义的变量在函数外是不可见的。但如果该变量是在某个代码块中定义的如在某个if或for语句中它在代码块外是可见的。3 4 var a 1;5 function f(){6 var b 2;7 return a;8 }9
10 alert(f()); //output 1
11 alert(b); //output b is undefined
12
13 变量a 是属于全局域的变量b 的作用域是属于函数f ( ) 内。
14 在f ( ) 内a 和b 都是可见的。
15 在f ( ) 外a 是可见的b 则是不可见的。
16
17 var a 1;
18 function f(){
19 var b 2;
20 function n(){
21 var c 3;
22 alert(a); //output 1
23 alert(b); //output 2
24 alert(c); //output 3
25 }
26 return n();
27 }
28 f();
29
30 函数n ( ) 可以访问的变量可以是自身的作用域也可以是其“父级”的作用域。这就形成了一条作用域链
31 function f1(){
32 var a 1;
33 f2();
34 }
35 function f2(){
36 return a;
37 }
38
39 alert(f1()); //output a is undefined
40
41 在定义函数f1 ( ) 和f2 ( ) 时只能访问全局作用域和其自身的作用域。
42 在定义函数f2 ( ) 时变量a 是不可见的。
43
44 var a 5;
45 function f1(){
46 var a 1;
47 f2();
48 }
49 function f2(){
50 return a;
51 }
52
53 alert(f1()); //output 5
54
55 在定义函数f1 ( ) 和f2 ( ) 时都是可以访问全局作用域的。
56 作用域链.html 闭包 定义指的是词法表示包括不被计算的变量的函数也就是说函数可以使用函数之外定义的变量。闭包的实现 1 var b;2 function a(){3 var a a;4 b function(){5 return a b;6 }7 return a;8 }9
10 //测试
11 alert(a()); //output a
12 alert(b()); //output ab 闭包的实现 在a ( ) 函数中定义了 b ( ) 函数所以b ( ) 函数可以访问a ( ) 函数的作用域。将 b ( ) 函数升级到全局函数但依然保留可以对a ( ) 函数作用域的访问权。 1 function f(){2 var a [];3 var i;4 for(i 0; i 3; i){5 a[i] function(){6 return i;7 }8 }9 return a;
10 }
11
12 var fun f();
13
14 alert(fun[0]()); //output 3
15 alert(fun[1]()); //output 3
16 alert(fun[2]()); //output 3 循环中的闭包1 按照预期最终结果应该输出 [0 , 1 , 2 ]但是却是[ 3 , 3 , 3 ]。在函数 f ( ) 中我们通过循环创建了三个闭包它们都指向了共同的局部变量 i 。但是闭包并不会记录它们的值它们所拥有的只是一个 i 的连接即引用因此只能返回i 的当前值。 1 function f(){2 var a [];3 var i;4 for(i 0; i 3; i){5 a[i] (function(x){6 return x;7 })(i);8 }9 return a;
10 }
11
12 var fun f();
13
14 alert(fun[0]); //output 0
15 alert(fun[1]); //output 1
16 alert(fun[2]); //output 2 循环中的闭包2 在这里我们不再直接创建一个返回i 的函数而是将i 传递给了一个自调函数。在该自调函数中i 就被赋值给了局部变量x 这样一来每次迭代中的x 就会拥有各自不同的值了。 1 function f(){2 function n(x){3 return x;4 }5 var a [];6 var i;7 for(i 0; i 3; i){8 a[i] n(i);9 }
10 return a;
11 }
12
13 var fun f();
14
15 alert(fun[0]); //output 0
16 alert(fun[1]); //output 1
17 alert(fun[2]); //output 2 循环中的闭包3 上面这种是不使用自调函数的用法。 对象 * 定义对象 * 普通对象 * new Object() * var 对象名 { 属性名 : 属性值, 方法名 : function(参数){} } 1 !DOCTYPE html2 html3 head4 title01_如何定义对象.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 //1 在javascript中,底层存在Object对象:Object对象应该所有对象的父级.
19 var obj1 new Object();
20
21 //2 JSON的key/value格式,Java中的Map集合
22 var ob2 {};
23
24 //3 在javascript中,函数即对象:函数对象(我起的)
25 function obj3(){}
26
27 /script
28 /html 如何定义对象 1 !DOCTYPE html2 html3 head4 title02_定义对象的属性和方法.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 //定义普通对象的属性和方法(JSON的key/value格式)
19 var hero {
20 name : zhangwuji,
21 sayMe : function(){
22 alert(i am zhangwuji.);
23 }
24 }
25
26 //定义函数对象的属性和方法
27 function Hero(){
28 this.name zhangwuji;
29 this.sayMe function(){
30 alert(i am zhangwuji.);
31 }
32 }
33
34 /*
35 * this的用法:
36 * * 指代DOM对象
37 * * 指代jQuery对象
38 * * 指代javascript对象
39 */
40
41
42 /script
43 /html 定义对象的属性和方法 * 函数对象 function 对象名(参数){ this.属性名 属性值; this.方法名 function(参数){} } * 调用对象 * 普通对象 * 调用 * 第一种 * 对象名.属性名; * 对象名.方法名(); * 第二种 * 对象名[属性名]; * 对象名[方法名](); * 增加 * 对象名.新的属性名 新的属性值; * 对象名.新的方法名 新的function(){} * 修改 * 对象名.属性名 新的属性值; * 对象名.方法名 新的function(){} * 删除 * delete 对象名.属性名; * delete 对象名.方法名; * 函数对象 * 概念性理解 * 函数对象的概念实际上是不存在的 * 函数对象实际上是叫做构造器 * var 对象名 new 构造器(); * 获取到函数对象(构造器)的属性和方法 * var 对象名 new 构造器(); * 调用、修改、删除及增加与操作普通对象一致。 1 !DOCTYPE html2 html3 head4 title03_调用对象的属性和方法.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 //普通对象
19 // var hero {
20 // name : zhangwuji,
21 // sayMe : function(){
22 // alert(i am zhangwuji.);
23 // }
24 // }
25
26 //调用普通对象hero的属性和方法
27 //1
28 // alert(hero.name);
29 // hero.sayMe();
30
31 //2
32 // alert(hero[name]);
33 // hero[sayMe]();
34
35 //增加普通对象hero的属性和方法
36 //hero.value zhouzhiruo;
37 //alert(hero.value);
38 // hero.sayVal function(){
39 // alert(zhangwujis value is zhouzhiruo.);
40 // }
41 // hero.sayVal();
42
43 //修改普通对象hero的属性和方法
44 //hero.name zhouzhiruo;
45 //alert(hero.name);
46 // hero.sayMe function(){
47 // alert(i am zhouzhiruo.)
48 // }
49 // hero.sayMe();
50
51 //删除普通对象hero的属性和方法
52 // delete hero.name;
53 // alert(hero.name);
54
55 // delete hero.sayMe;
56 // hero.sayMe();
57
58 /*
59 * 函数对象:类似于Java中的类的概念
60 * * 实际上,是不存在函数对象的概念的(是我们自己起的名)
61 * * 函数对象实际上是叫做构造器
62 */
63 function Hero(){
64 this.name zhangwuji;
65 this.sayMe function(){
66 alert(i am zhangwuji.);
67 }
68 }
69
70 /*
71 * 调用之前,必须要先new对象
72 * * 这里的写法是构造函数的写法
73 * * hero也是javascript对象,是一个普通对象
74 */
75 var hero new Hero();
76
77 //调用函数对象Hero的属性和方法
78 // alert(hero.name);
79 // alert(hero[name]);
80
81 // hero.value zhouzhiruo;
82 // alert(hero.value);
83
84 // delete hero.name;
85 // alert(hero.name);
86
87 hero.name zhouzhiruo;
88 alert(hero.name);
89
90 // class A(){
91 // String name zhangwuji;
92 // }
93 //
94 // A a new A();
95 // a.name
96
97 /script
98 /html 调用对象的属性和方法 1 !DOCTYPE html2 html3 head4 title04_this的用法.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 /*
19 * this的用法:
20 * * 指代DOM对象(常用)
21 * * 指代JQuery对象(最不常用)
22 * * 指代javascript对象(居中)
23 *
24 * this的实际用法,不止以上三种.
25 */
26 //1 指代DOM对象
27 // document.getElementById(ok).onclick function(){
28 // this.value;
29 // }
30
31 //2 指代jQuery对象:在jQuery的插件中使用
32 $.each(this,function(){
33 alert(this.value);
34 });
35
36 //3 指代javascript对象:只要在函数对象中,使用this的话,this永远都指代函数对象
37 function Hero(){
38 this.name zhangwuji;
39 this.sayMe function(){
40 alert(hello this.name);
41 }
42 }
43
44 var hero new Hero();
45
46 hero.sayMe();
47
48 /script
49 /html this的用法 内建对象 * 数据封装类对象 * String、Array、Number等 * 工具类对象 * Date、Math等 * 错误类对象 * Error、异常对象等 * 在javascript中只有对象变量、方法、集合等 * javascript是更纯粹的面向对象 1 !DOCTYPE html2 html3 head4 title05_举例.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 //定义一个字符串
19 var str aaaa;
20 //定义一个数值
21 var i 7;
22 //定义一个数组
23 var arr [1,2,3,4,5];
24
25 /*
26 * 这些所谓的常用类型,可以直接使用
27 * * 这种方式类似于Java中JDK提供的常用类型
28 * * 说明在javascript的底层,提供了类似的常用类型
29 *
30 * javascript的内建对象:Java中的API提供的常用类型
31 * * javascript内建对象:帮助文档w3school.chm
32 * * javascript的内容并不像java一样,具有完整的帮助文档.(javascript没有完整的帮助文档)
33 */
34
35 /script
36 /html 内建对象 Array 1 !DOCTYPE html2 html3 head4 title02_Array对象.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 //以下两种写法是等价的
19 var arr1 [];
20 var arr2 new Array();
21
22 alert(typeof arr1); //object
23 alert(typeof arr2); //object
24
25 //Array对象的属性
26 //1 length属性:获取数组长度
27 //alert(arr1.length);
28
29 //2 index和input属性,放弃的
30
31 //3 constructor属性:返回对创建此对象的数组函数的引用。(不研究)
32
33 //4 prototype属性:使您有能力向对象添加属性和方法。(现在不研究,统一放在原型的内容)
34
35 //Array对象的方法
36 //1 toString()方法:把数组转换为字符串并返回结果。
37
38 //2 join()方法:把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
39
40 //3 pop()和push()方法:删除并返回数组的最后一个元素向数组的末尾添加一个或更多元素并返回新的长度。
41
42 //4 reverse()方法:颠倒数组中元素的顺序。
43
44 //javascript的内建对象的属性和方法,在Java中的JDK的内容,都有类似的内容
45
46 //反转字符串示例(面试题)
47
48 //定义一个字符串
49 var str abcdefg;
50 //利用String对象的split()方法将字符串切割成一个数组
51 var arr str.split();
52 //利用Array对象的reverse()方法将数组中元素的顺序颠倒。
53 arr arr.reverse();
54 //测试打印
55 alert(arr.toString());
56
57 //Java的版本至少在1.5版本以上
58
59
60 /script
61 /html Array对象 String 1 !DOCTYPE html2 html3 head4 title03_String对象.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 //以下两种写法不是等价的(面试)
19 var str1 aaa;
20 // var str2 new String(aaa);
21 //
22 // alert(typeof str1); //string
23 // alert(typeof str2); //object
24
25 //String对象的属性
26 //length属性:字符串的长度(字符的个数)
27 //alert(str1.length); //3
28
29 //String对象的方法
30 //1 substr():从起始索引号提取字符串中指定数目的字符。
31 //2 substring():提取字符串中两个指定的索引号之间的字符。
32
33 //3 split():把字符串分割为字符串数组。
34
35 //4 replace():替换与正则表达式匹配的子串。
36
37 //判断字符串是否包含指定字符串示例
38
39 //定义两个要判断的字符串
40 var str abcdefg;
41 var substr xyz;
42
43 function sub(str,substr){
44 //将判断的字符串定义成String对象
45 var string new String(str); //不必要,更规范一些
46 //截取判断的字符串
47 var result string.substr(string.indexOf(substr),substr.length);
48
49 if(resultsubstr){
50 return true;
51 }else{
52 return false;
53 }
54 }
55
56 alert(sub(str,substr));
57
58 /script
59 /html String对象 Events对象 1 !DOCTYPE html2 html3 head4 title04_Events对象.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 /*
19 * Event:事件
20 * Events对象:事件对象
21 * * 在javascript中,具有事件的.
22 * onclick\ondblclick\onchange等
23 * * 事件对象与之前使用的事件内容,是否存在关系?
24 * 之前使用的事件内容,其实是javascript中事件对象的属性.
25 */
26
27
28
29 /script
30 /html Events对象 Functions对象 1 !DOCTYPE html2 html3 head4 title05_Functions对象.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 /*
19 * Functions对象:javascript全局对象
20 * * 全局属性:
21 * * NaN:表示不是一个数值
22 * * undefined:未定义
23 * * 全局方法
24 * * decodeURI():解码某个编码的 URI。
25 * * encodeURI():把字符串编码为 URI。
26 * * escape():对字符串进行编码。
27 * * eval():计算 JavaScript 字符串并把它作为脚本代码来执行。
28 * * isNaN():检查某个值是否是数字。返回值为Boolean值,true不是数字.
29 *
30 * Functions对象与Function对象:是不是一个?
31 * * Function对象实际上,浏览器内核中集成的javascript引擎里.
32 * * 对于Function对象,我们只需要了解new Function()定义函数即可.
33 */
34
35
36
37
38 /script
39 /html Functions对象.html Object对象 1 !DOCTYPE html2 html3 head4 title01_Object对象.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 //以下两种写法是等价的(面试题)
19 var obj1 new Object();
20 var obj2 {};
21
22 //Object对象是所有javascript对象的父级.
23
24 //面试题(真实)
25 //判断以下哪个描述是错误的?D
26 // var a {}; //定义对象
27 // var b []; //定义数组
28 // var c //; //定义正则表达式
29 // var d ();
30
31 //面试题(百度)
32 //alert():提示框,在提示框中实现换行
33 alert(xxx\nyyy);
34
35
36 /script
37 /html Object对象.html 更多参考W3cSchool帮助文档 原型(prototype)及其重要(作用) * 定义原型就是一个函数对象的属性。记住是函数对象function XXX{ namexxx...... } * 作用 * 利用原型为函数对象增加属性和方法 1 !DOCTYPE html2 html3 head4 title01_研究函数对象的原型属性.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 //原型是函数对象的一个属性(普通对象是没有原型属性的.).
19 function Hero(){
20 this.name zhangwuji;
21 this.sayMe function(){
22 alert(i am zhangwuji.);
23 }
24 }
25
26 //调用函数对象Hero的属性和方法:new Hero()
27 var hero new Hero();
28
29 //调用函数对象Hero的属性或方法时,实际上调用new之后的hero对象.
30 //alert(hero.name);
31
32 //调用函数对象的原型属性,是应该调用Hero对象还是hero对象呢?
33 //hero.prototype;
34 Hero.prototype;
35
36
37
38
39 /script
40 /html 研究函数对象的原型属性.html 1 !DOCTYPE html2 html3 head4 title02_利用原型增加函数对象的属性或方法.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is m
16 script typetext/javascript
17 // function Hero(){
18 // this.name zhangwuji;
19 // this.sayMe function(){
20 // alert(i am zhangwuji.);
21 // }
22 // }
23
24 //普通对象
25 // var hero new Hero();
26
27 //hero.value zhouzhiruo;
28
29 //利用原型为函数对象增加属性或方法.
30 //函数对象.prototype.新的属性名 新的属性值;
31 //Hero.prototype.value zhouzhiruo;
32
33 //alert(hero.prototype.value); //output zhouzhiruo
34 //alert(hero.value);
35
36 // Hero.prototype.sayVal function(){
37 // alert(i am zhouzhiruo.);
38 // }
39 //
40 // alert(hero.sayVal());
41
42 //利用原型增加的属性和方法与上午说的增加属性和方法的区别?利用原型增加属性和方法更优
43 //1 定义一个函数对象
44 function Hero(){
45 this.name zhangwuji;
46 this.sayMe function(){
47 alert(i am zhangwuji.);
48 }
49 }
50
51 //2 (分散形式)利用原型增加属性和方法
52 // Hero.prototype.value zhouzhiruo;
53 // Hero.prototype.sayVal function(){
54 // alert(i am zhouzhiruo.);
55 // }
56
57 //学习JSON时
58 // var method {
59 // add : function(a,b){
60 // return ab;
61 // }
62 // }
63
64 /*
65 * (集中方式)将增加属性和方法的内容,集中写在一起
66 * * 格式:函数对象.prototype 新的对象
67 * * 注意:只能先增加,再new对象
68 * (分散形式)
69 * * 先new对象和后new对象,没有关系
70 */
71 Hero.prototype {
72 value : zhouzhiruo,
73 sayVal : function(){
74 alert(i am zhouzhiruo.);
75 }
76 }
77
78 //3 new对象
79 var hero new Hero();
80
81 //4 测试
82 alert(hero.value);
83 hero.sayVal();
84
85 /script
86 /html 利用原型增加函数对象的属性或方法.html * 函数对象的属性或方法与原型的属性或方法同名时: * 函数对象本身的属性和方法的优先级要高于原型上的熟悉感和方法 * 利用函数对象的属性和方法重写原型上的属性和方法 1 !DOCTYPE html2 html3 head4 title03_函数对象的属性或方法与原型的属性和方法同名.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 /*
19 * 函数对象的属性或方法与原型的属性或方法同名时:
20 * * 调用的属性和方法,是函数对象的属性和方法
21 * * 函数对象本身的属性和方法与原型的属性和方法同时存在
22 * * 函数对象本身的属性和方法的优先级要高于原型上的熟悉感和方法
23 */
24 function Hero(){
25 this.name zhangwuji;
26 this.sayMe function(){
27 alert(i am zhangwuji.);
28 }
29 }
30
31 //原型增加的属性和方法,到底有没有增加上去呢?
32 Hero.prototype {
33 name : zhouzhiruo,
34 sayMe : function(){
35 alert(i am zhouzhiruo.);
36 }
37 }
38
39 var hero new Hero();
40
41 alert(hero.name); //output zhangwuji
42
43 delete hero.name;
44
45 alert(hero.name); //output zhouzhiruo
46
47
48
49 /script
50 /html 函数对象的属性或方法与原型的属性和方法同名.html 1 !DOCTYPE html2 html3 head4 title04_利用原型重新定义函数对象.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 //定义一个空的函数对象
19 function Hero(){}
20
21 //函数对象的属性和方法,都定义在原型上
22 Hero.prototype {
23 name : zhangwuji,
24 sayMe : function(){
25 alert(i am zhangwuji.);
26 }
27 }
28
29 /script
30 /html 利用原型重新定义函数对象.html * 内建对象(应该都是函数对象)都有prototype属性 * 可以扩展内建对象的属性和方法 1 !DOCTYPE html2 html3 head4 title05_扩展内建对象的属性和方法.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 // //为原型 Array对象增加一个判断的函数
19 // Array.prototype.inArray function(color){
20 // //this指代Array对象
21 // for(var i 0, len this.length; i len; i){
22 // //叫全等号:值和类型;!叫全不等号
23 // if(this[i] color){
24 // return true;
25 // }
26 // }
27 // return false;
28 // }
29 //
30 // //定义一个Array对象
31 // var a [red, green, blue];
32 //
33 // //测试
34 // alert(a.inArray(red)); //true
35 // alert(a.inArray(yellow)); //false
36
37 function inArray(arr,color){
38 for(var i 0, len arr.length; i len; i){
39 //叫全等号:值和类型;!叫全不等号
40 if(arr[i] color){
41 return true;
42 }
43 }
44 return false;
45 }
46
47 var a [red, green, blue];
48
49 alert(inArray(a,red)); //output true
50
51 /*
52 * 以上两种写法哪种更好?
53 * * (更好)一种通过原型扩展内建对象
54 * * 自定义函数完成需求
55 * 但是,一般不建议大家使用原型来扩展内建对象.
56 * * 扩展内建对象这种方式不好.(内建对象是底层提供的,最好不要修改)
57 * 但是,介绍js库的时候,有prototype.
58 * * 对于javascript原型这个概念,讨论的是比较激烈?
59 * * (A)正面,支持这种用法,代表性的是prototype库.
60 * * (B)反面,不支持.
61 * 关于利用原型扩展内建对象,了解即可.
62 */
63
64
65 /script
66 /html 扩展内建对象的属性和方法.html 继承 * 定义如果两个类都是同一个实例的类型那么它们之间存在着某些关系 我们把同一个实例的类型之间的泛化关系称为“继承”。 如果两个类都是同一个实例的类型那么它们之间存在着某些关系我们把同一个实例的类型之间的泛化关系称为“继承”。继承关系至少包含三层含义子类的实例可以共享父类的方法。子类可以覆盖父类的方法或扩展新的方法。子类和父类都是子类实例的“类型”。在javascript中并不支持“继承”。也就是说javascript中没有继承的语法。从这个意义上来说javascript并不是直接的面向对象语言。 * 问题 * 在javascript中是不存在继承的关系的关键字 extend * 在javascript中没有类的概念。 * javascript就不是一个直接的面向对象语言。 * 继承 * javascript中函数对象与函数对象之间的继承。 1 !DOCTYPE html2 html3 head4 title01_利用原型实现继承.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 function A(){
19 this.a a;
20 this.sayA function(){
21 alert(this is a.);
22 }
23 }
24
25 var a new A();
26
27 function B(){
28 this.b b;
29 this.sayB function(){
30 alert(this is b.);
31 }
32 }
33
34 B.prototype a;
35
36 //测试:函数对象B就继承了函数对象A
37 var b new B();
38
39 // alert(b.b);
40 // b.sayB();
41 //
42 // alert(b.a);
43 // b.sayA();
44
45 // b.a c;
46 // b.sayA function(){
47 // alert(this is c.)
48 // }
49 //
50 // alert(b.a);
51 // b.sayA();
52
53 // b.c c;
54 // b.sayC function(){
55 // alert(this is c.)
56 // }
57 //
58 // alert(b.c);
59 // b.sayC();
60
61 /script
62 /html 利用原型实现继承.html 1 !DOCTYPE html2 html3 head4 title02_只继承于原型.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 // function A(){
19 // this.a a;
20 // this.sayA function(){
21 // alert(this is a.);
22 // }
23 // }
24 //
25 // function B(){
26 // this.b b;
27 // this.sayB function(){
28 // alert(this is b.);
29 // }
30 // }
31 //
32 // B.prototype A.prototype;
33 //
34 // //测试
35 // var b new B();
36 //
37 // alert(b.a);
38 // b.sayA();
39
40 /******************************************/
41
42 // function A(){}
43 //
44 // A.prototype {
45 // a : a,
46 // sayA : function(){
47 // alert(this is a.)
48 // }
49 // }
50 //
51 // function B(){}
52 //
53 // B.prototype {
54 // b : b,
55 // sayB : function(){
56 // alert(this is b.)
57 // }
58 // }
59 //
60 // B.prototype A.prototype;
61 //
62 // var b new B();
63 //
64 //// alert(b.a);
65 //// b.sayA();
66 //
67 // alert(b.b);
68 // b.sayB();
69
70 /***************************************/
71
72 function A(){}
73
74 A.prototype {
75 a : a,
76 sayA : function(){
77 alert(this is a.)
78 }
79 }
80
81 function B(){
82 this.b b;
83 this.sayB function(){
84 alert(this is b.);
85 }
86 }
87
88 B.prototype A.prototype;
89
90 var b new B();
91
92 alert(b.b);
93 b.sayB();
94
95 alert(b.a);
96 b.sayA();
97
98 /script
99 /html 只继承于原型.html 1 !DOCTYPE html2 html3 head4 title03_解决多函数对象之间的继承关系.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 function A(){}
19
20 A.prototype {
21 a : a,
22 sayA : function(){
23 alert(this is a.)
24 }
25 }
26
27 function B(){}
28
29 //这种方式利用原型为函数对象B增加属性和方法(集中方式)
30 // B.prototype {
31 // b : b,
32 // sayB : function(){
33 // alert(this is b.)
34 // }
35 // }
36
37 //分散形式
38 // B.prototype.b b;
39 // B.prototype.sayB function(){
40 // alert(this is b.)
41 // }
42
43 /*
44 * 分析得出这句话出问题了
45 * * 因为B.prototype多次调用
46 * * 出现的顺序有关系?谁先定义,谁被覆盖
47 * * 原型定义属性和方法的形式有关系?没有关系
48 */
49 B.prototype A.prototype;
50
51 // B.prototype {
52 // b : b,
53 // sayB : function(){
54 // alert(this is b.)
55 // }
56 // }
57
58 /*
59 * 条件:
60 * * 先实现函数对象B继承函数对象A的内容
61 * * 再利用原型为函数对象B增加属性和方法(分散形式)
62 */
63 B.prototype.b b;
64 B.prototype.sayB function(){
65 alert(this is b.)
66 }
67
68 var b new B();
69
70 alert(b.a);
71 b.sayA();
72
73 alert(b.b);
74 b.sayB();
75
76
77
78
79 /script
80 /html 解决多函数对象之间的继承关系.html 原型链 1 原型链是ECMAScript标准制定的默认继承方式。2 function A(){3 this.name a;4 this.toString function(){return this.name};5 }6 function B(){7 this.name b;8 }9 function C(){
10 this.name c;
11 this.age 18;
12 this.getAge function(){return this.age};
13 }
14
15 B.prototype new A();
16 C.prototype new B();
17 将对象直接创建在B对象的prototype属性中并没有去扩展这些对象的原有原型。
18 通过new A ( ) 另创建了一个新的实体然后用它去覆盖该对象的原型。
19 javascript是一种完全依靠对象的语言其中没有类class的概念。
20 因此需要直接用new A ( ) 创建一个实体然后才能通过该实体的属性完成相关的继承工作。
21 完成这样的继承实现之后对 A ( ) 所进行的任何修改、重写或删除都不会对 B ( ) 产生影响。
22
23 只继承于原型
24 function A(){}
25 A.prototype.name a;
26 A.prototype.toString function(){return this.name};
27
28 function B(){}
29 B.prototype A.prototype;
30 B.prototype.name b;
31
32 function C(){}
33 C.prototype B.prototype;
34 C.prototype.name c;
35 C.prototype.age 18;
36 C.prototype.getAge function(){return this.age};
37
38 对象之间的继承扩展内容可以不会浅复制
39 //该函数接受一个对象并返回它的副本
40 function extendCopy(p){
41 var z {}; //定义一个空的对象z
42 for(var i in p){ //var i 0 ; i p.length ; i
43 z[i] p[i]; //都当做数组处理的话可以理解
44 }
45 //uber属性将p作为z的父级将z指向p的原型
46 z.uber p;
47 return z;
48 }
49 //定义对象a但是对象a不是函数对象
50 var a {
51 name : a,
52 toStr : function(){return this.name;}
53 }
54 //定义对象b但是对象b不是函数对象
55 var b extendCopy(a);
56 b.name b;
57 b.toStr function(){return this.uber.toStr() , this.name;};
58 //定义对象c但是对象c不是函数对象
59 var c extendCopy(b);
60 c.name 18;
61
62 alert(c.toStr()); //output a , b , 18 原型链 * (了解)javascript中的普通对象之间是否也存在继承关系呢?存在 1 !DOCTYPE html2 html3 head4 title04_普通对象之间的继承.html/title5 6 meta http-equivkeywords contentkeyword1,keyword2,keyword37 meta http-equivdescription contentthis is my page8 meta http-equivcontent-type contenttext/html; charsetUTF-89
10 !--link relstylesheet typetext/css href./styles.css--
11
12 /head
13
14 body
15 This is my HTML page. br
16 /body
17 script typetext/javascript
18 //对象之间的继承
19
20 //该函数接受一个对象并返回它的副本
21 function extendCopy(p){
22 var z {}; //定义一个空的对象z
23 for(var i in p){ //var i 0 ; i p.length ; i
24 z[i] p[i]; //都当做数组处理的话可以理解
25 }
26 //uber属性将p作为z的父级将z指向p的原型
27 z.uber p;
28 return z;
29 }
30 //定义普通对象a但是对象a不是函数对象
31 var a {
32 name : a
33 }
34 //暂且将b也当作普通对象来看待
35 var b extendCopy(a);
36 b.toStr function(){return this.name;};
37
38 alert(b.toStr()); //output a
39
40 /script
41 /html 普通对象之间的继承.html 转载于:https://www.cnblogs.com/biaogejiushibiao/p/9428210.html
