JS高级学习历程-8

2 构造函数和普通函数的区别

两者本身没有实质区别，具体看使用

new 函数(); -------->构造函数

函数(); ---------> 普通函数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>26-构造函数和普通函数</title>
 6     <script type="text/javascript">
 7       //构造函数和普通函数
 8       function Animal(){
 9           this.addr = "china";
10           this.age = 6;
11       }
12       window.Animal(); //普通函数调用
13       console.log(addr);
14       console.log(age);
15 
16       //构造函数调用
17       var cat = new Animal();
18       console.log(cat);
19     </script>
20 </head>
21 <body>
22     
23 </body>
24 </html>

26-构造函数和普通函数

3 return关键字

return关键字是否对实例化对象有影响

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>27-return关键字影响</title>
 6     <script type="text/javascript">
 7         //return关键字影响
 8         //return对构造函数创建对象没有影响
 9         //该关键字后边的代码不给执行而已
10         function Animal(ad,ag){
11             this.addr = ad;
12             this.age = ag;
13             this.color = "black";
14 
15             return "tiger";
16 
17             this.run = function(){
18                   console.log('走直线');
19             }
20         }
21         //var rst = Animal('china',9); //tiger字符串
22         var cat = new Animal('波斯湾',7); //Animal { addr="波斯湾" ,age=7, color="black"}
23         console.log(cat);
24     </script>
25 </head>
26 <body>
27     
28 </body>
29 </html>

27-return关键字影响

4 对象在内存中的分配

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>28-对象在内存中的分配</title>
 6     <script type="text/javascript">
 7       //对象在内存中分配 
 8       function Animal(){
 9           this.color = "black";
10           this.age = 5;
11           this.run = function(){
12               console.log('走直线');
13           }
14       }
15       var cat = new Animal();
16 
17       var dog = new Animal();
18 
19       var black = cat; //引用赋值
20 
21       black.color = "yellow";
22       console.log(cat.color);
23     </script>
24 </head>
25 <body>
26     
27 </body>
28 </html>

28-对象在内存中的分配

5 对象成员的删除

delete 对象.成员;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>29-成员对象删除</title>
 6     <script type="text/javascript">
 7       //对象成员删除
 8       function Animal(){
 9           this.color = "black";
10           this.age = 5;
11           this.run = function(){
12                   console.log('走 直线');
13             }
14       }
15       var cat = new Animal();
16       console.log(cat); //Animal { color="black", age=5, run=function()}
17 
18       delete cat.age; //删除指定对象的属性
19 
20       console.log(cat); //Animal { color="black", run=function()}
21     </script>
22 </head>
23 <body>
24     
25 </body>
26 </html>

29-成员对象删除

6 函数各种执行方式

①普通函数调用

②当作构造函数实例化对象

③可以作为对象的成员方法进行调用

④call()和apply() 使得函数可以执行

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>30-函数执行方式</title>
 6     <script type="text/javascript">
 7       //call()和apply()对函数进行调用
 8       var addr = "china";
 9       var age = 9;
10       function getInfo(){
11           //this通俗意义：谁调用这个函数，this就代表谁
12           console.log(this.addr+"--"+this.age);
13       }
14       getInfo(); //china--9
15 
16       var cat = {name:'kitty',addr:'波斯湾',age:10};
17       cat.express = getInfo; //使用一个“函数”给对象赋值，那么这个对象的成员也是一个方法
18 
19       //程序代码由于非常多，不小心，相同的名称在不同的地方都有使用
20       //代码出现了变量污染的问题
21       cat.express = "I am kitty,I come from 波斯湾";
22       cat.express();//访问错误，变量express已经被污染
23     </script>
24 </head>
25 <body>
26     
27 </body>
28 </html>

30-函数执行方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>31-函数执行方式call-apply</title>
 6     <script type="text/javascript">
 7       //call()和apply()对函数进行调用
 8 
 9       var addr = "china";
10       var age = 9;
11       function getInfo(ht,cl){
12           console.log(ht+"--"+cl+"--"+this.addr+"--"+this.age);
13       }
14 
15       var cat = {name:'kitty',addr:'波斯湾',age:10};
16       var dog = {name:'帝国黑背',addr:'德国',age:8};
17 
18       //getInfo.call(函数内部this指引，参数1，参数2，参数3。。。参数n);
19       getInfo.call(cat,30,'yellow'); //波斯湾--10
20       getInfo.call(dog,80,'black'); //德国--8
21 
22       //被调用函数.apply(内部this指引,[参数1，参数2。。。参数n])
23       getInfo.apply(cat,[20,'gold']);
24       getInfo.apply(dog,[60,'gray']);
25     </script>
26 </head>
27 <body>
28     
29 </body>
30 </html>

31-函数执行方式call-apply

7 this关键字使用

① 代表调用该函数的当前对象

②代表window

③代表元素节点对象

④可以通过call和apply任意代表其他对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>32-this代表调用该方法当前对象</title>
 6     <script type="text/javascript">
 7       //call()和apply()对函数进行调用
 8 
 9       var addr = "china";
10       var age = 9;
11       function getInfo(ht,cl){
12           console.log(ht+"--"+cl+"--"+this.addr+"--"+this.age);
13       }
14       getInfo(); //内部this代表window
15 
16       //获得一个对象
17       var cat = {addr:'北京',age:4}
18       cat.say = getInfo;
19 
20       cat.say(25,'white'); //say函数内部this代表带用该方法的当前对象
21     </script>
22 </head>
23 <body>
24     
25 </body>
26 </html>

32-this代表调用该方法当前对象

8 构造器constructor

任何一个对象都可以调用属性constructor,用于返回该对象的构造函数的名字

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>33-constructor构造器</title>
 6     <script type="text/javascript">
 7       //构造器
 8 
 9       function Animal(){
10           this.color = "yellow";
11       }
12       var dog = new Animal();
13       console.log(dog.constructor);//Animal()
14 
15       //获得一个对象
16       var cat={addr:'北京',age:4};
17 
18       console.log(cat.constructor);//Object()
19 
20       //函数也是对象，通过constructior也可以获得函数的构造器(Function)
21       function f1(name,color,addr){
22           console.log(name+"--"+color+"--"+addr);
23       }
24       f1('tom','white','newwork');
25       console.log(f1.constructor);//Function()
26 
27       //var 函数名字 = new Function(参数1，参数2，参数3，。。。参数n，函数代码体);
28       var f2 = new Function('name','color','addr',"console.log(name+'--'+color+'--'+addr)");
29       f2('jack','pink','beijing');
30     </script>
31 </head>
32 <body>
33     
34 </body>
35 </html>

33-constructor构造器

总结：

闭包案例(数组声明、鼠标当前行高亮显示)
面向对象

对象创建

① {}字面量方式(json数据格式)

② new 函数(); 构造函数方式创建

③new Object(); 创建对象

普通函数和构造函数

return关键字

对象成员删除 delete 对象.成员.

函数执行方式：

① 普通函数调用

② 当作构造函数实例化对象

③ 对象成员方法执行

④ call和apply进行调用

this指引

① 代表window

② 函数内部，谁调用函数就代表谁

③ 代表元素节点对象

④ 通过call和apply任意代表其他对象

构造器constructor

作业：

练习闭包，弹出无需列表对应项目的文本信息
总结this关键字用法，(代表对象与具体代码)
练习对象创建的三种方式
练习(熟练)使用call和apply

posted @ 2015-05-27 21:48 竹立荷塘阅读(187) 评论(0) 编辑收藏举报

刷新页面返回顶部

一片天空