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>
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>
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>
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>
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>
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>
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>
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>
总结：
- 闭包案例(数组声明、鼠标当前行高亮显示)
- 面向对象
对象创建
① {}字面量方式(json数据格式)
② new 函数(); 构造函数方式创建
③new Object(); 创建对象
普通函数和构造函数
return关键字
对象成员删除 delete 对象.成员.
函数执行方式：
① 普通函数调用
② 当作构造函数实例化对象
③ 对象成员方法执行
④ call和apply进行调用
this指引
① 代表window
② 函数内部，谁调用函数就代表谁
③ 代表元素节点对象
④ 通过call和apply任意代表其他对象
构造器constructor
作业：
- 练习闭包，弹出无需列表对应项目的文本信息
- 总结this关键字用法，(代表对象 与 具体代码)
- 练习对象创建的三种方式
- 练习(熟练)使用call和apply
