閉包:函數(shù)就是一個(gè)閉包,一個(gè)封閉的作用域;

返回函數(shù),要返回多個(gè)函數(shù)就用一個(gè)對象封裝一下,
立即執(zhí)行函數(shù)+return
回調(diào)函數(shù) JS動(dòng)態(tài)創(chuàng)建的DOM,不會(huì)被搜索引擎抓取,對SEO不友好.

1. /*window的name屬性*/
2. function fn(){
3. console.log(this.name);
4. }
5. fn.call({name:"zhangsan"});//"zhangsan"
6. console.log();
7. fn();//'' 打印空字符串,此時(shí)調(diào)用fn其中的的this指的是window對象,
8. //window對象具有name屬性,值是一個(gè)空字符串

1. //函數(shù)的四種調(diào)用模式
2. //上下文模式 call apply 借用的概念
3. function foo(){
4. }
5. //當(dāng)foo函數(shù)聲明好了后無法確定foo函數(shù)的身份,只有在調(diào)用的時(shí)候
6. //才能確定foo的所屬;根據(jù)foo函數(shù)的執(zhí)行情況和返回結(jié)果
8. //js中函數(shù)由四種不同的調(diào)用方式,其中this的指向,返回值由return決定(構(gòu)造函數(shù)特殊)
9. //1.函數(shù)調(diào)用模式
10. foo();//本質(zhì)就是使用window對象,調(diào)用;指向window
11. //2.方法調(diào)用模式,把函數(shù)當(dāng)做對象的方法;this指向obj
12. var obj ={
13. fn:function(){
14. }
15. };
16. obj.fn();
17. obj['fn']();
18. //3構(gòu)造函數(shù)調(diào)用 將函數(shù)當(dāng)成構(gòu)造函數(shù)來調(diào)用(new);this指向構(gòu)造函數(shù)的實(shí)例
19. functionFoot(){}
20. newFoot();
21. //構(gòu)造函數(shù)沒有return語句,返回的是構(gòu)造函數(shù)的實(shí)例
22. //有return,return的內(nèi)容是一個(gè)對象,返回值是return語句的對象;如果return的是基本數(shù)據(jù)類型,那返回值
23. //還是實(shí)例
24. functionFoot2(){
25. return[1,2,3];
26. }
27. var foot2=newFoot2();
28. console.log(foot2.__proto__);//Array.prototype ?Array[0]
30. //4.上下文調(diào)用模式,根據(jù)用戶傳遞的參數(shù)產(chǎn)生不同的結(jié)果 .this的值由調(diào)用者決定;
31. //call/apply 這兩個(gè)方法都是定義在Function.prototype中的方法,這樣任何函數(shù)都能訪問到這兩個(gè)方法
32. //調(diào)用模式,只有函數(shù)才能調(diào)用
33. function fn(){
34. console.log(this.name);
35. }
36. console.log(fn.call()===Function.prototype.call());//true
37. fn.call({name:"zhangsan"});//zhangsan
38. //call方法的第一個(gè)參數(shù)指的是本次調(diào)用該函數(shù)內(nèi)部this的值
39. fn();//此時(shí)this指向window window有一個(gè)name屬性是"" 空字符串.

1. function foo(){
2. console.log(this.name);
3. return[1,2,3];
4. }
5. foo();//""
6. var f1=foo.call({name:"張三"});//"張三"
7. console.log(f1.__proto__);//上下文模式return返回值由return決定,返回值是一個(gè)數(shù)組對象 //Array.prototype
8. var f2=new foo();//undefined
9. console.log(f2.__proto__);//Array.prototype

1. /*call方法*/
2. ? ?/*以下方法使用apply使用時(shí)相同的*/

3. function foo(){
4. console.log(this.age);
5. }
6. var obj={age:18};
7. foo.call(obj);//18 其中的this指的是obj
8. foo.call(null);//foo函數(shù)中的this指向window
10. //call方法的第一個(gè)參數(shù)還可以是數(shù)字,字符串,布爾值這些基本的數(shù)據(jù)類型
11. foo.call(3);//number 數(shù)字3轉(zhuǎn)化為對應(yīng)的基本包裝類型Number類型

1. /*call方法*/
2. function foo(){
3. console.log(this.age);
4. }
5. var obj ={age:18};
6. foo.call(obj);//18 其中的this指的是obj
7. foo.call(null);//foo函數(shù)中的this指向window
9. //call方法的第一個(gè)參數(shù)還可以是數(shù)字,字符串,布爾值這些基本的數(shù)據(jù)類型
10. foo.call(3);//number 數(shù)字3轉(zhuǎn)化為對應(yīng)的基本包裝類型Number類型
13. /*call有實(shí)參的情況*/
14. function fn(){
15. //傳遞的參數(shù)在函數(shù)內(nèi)部使用arguments獲取
16. for(var i =0; i < arguments.length; i++){
17. console.log(arguments[i]);
18. }
19. }
20. //使用call方法來調(diào)用fn函數(shù)的時(shí)候,如果需要傳遞實(shí)參,將實(shí)參作為call方法的第二個(gè)參數(shù)開始依次傳遞
21. fn.call(null,1,2,3,4)
22. /*apply有實(shí)參的情況*/
23. function fun(){
24. for(var i=0;i<arguments.length;i++){
25. console.log(arguments[i]);
26. }
27. }
28. //使用apply方法來調(diào)用fun函數(shù)的時(shí)候,第二個(gè)參數(shù)是一個(gè)數(shù)組對象
29. fun.apply(null,[1,3,5]);
30. //第一個(gè)參數(shù):函數(shù)內(nèi)部this的值
31. //[實(shí)參1,實(shí)參2,實(shí)參3]
33. // call/aply的異同點(diǎn)
34. //相同點(diǎn):他們都是Function.prototype對象中定義的方法
35. //第一個(gè)參數(shù)都表示函數(shù)內(nèi)部的this的值
36. //不同點(diǎn):在傳參的時(shí)候,如果給函數(shù)傳參的時(shí)候利用call方法,
37. // apply傳遞的是數(shù)組.call傳遞的是用逗號(hào)分隔的一個(gè)一個(gè)的參數(shù)

1. /*上下文模式借用內(nèi)置方法*/
2. //數(shù)組里面的push方法實(shí)現(xiàn)的功能,向數(shù)組里面添加一個(gè)元素
3. //1.借用push方法,向偽數(shù)組中添加元素;[].push Array.prototype
4. //偽數(shù)組是沒有push方法的,首先我們要能訪問到push方法
5. var arr={1:10,2:28};
6. [].push.call(arr,10,20,30);
7. console.log(arr);
9. //jQuery對象也是偽數(shù)組
10. //向數(shù)組中添加元素的方法
11. //push
12. //arr[arr.length]
14. //2.借用數(shù)組的push方法向數(shù)組中添加元素
15. var arr1 =[];
16. var arr2=[10,120,10,20];
17. //需求 將arr2中的元素添加到arr1中
18. [].push.apply(arr1,arr2);//apply方法
19. for(var i=0;i<arr2.length;i++){//之前的方法
20. arr1.push(arr2[i]);
21. }

1. //數(shù)組的方法經(jīng)常被偽數(shù)組所借用
3. //1.需求 將一個(gè)偽數(shù)組轉(zhuǎn)化為真數(shù)組:slice
4. var arr=[13,12,12,34];
5. arr.slice(1);//從索引1開始截取,到最后一個(gè)元素[12,12,34]
7. var obj ={0:"范明",1:"小沈陽",length:2};
8. [].slice.call(obj);//返回的是一個(gè)數(shù)組["范明","小沈陽"];
9. [].slice.call(obj,1);//返回的是一個(gè)數(shù)組["小沈陽"];
11. //2.刪除偽數(shù)組里面的元素
12. var obj2 ={0:"范明",1:"小沈陽",2:"沈陽",length:2};
13. //刪除數(shù)組中的第第三個(gè)元素,參數(shù)從第幾個(gè)開始刪,刪除幾個(gè)
14. var newObj=[].splice.call(obj2,1,1);
15. console.log(newObj);//["小沈陽"]
16. console.log(obj2);//Object {0: "范明", 2: "沈陽", length: 1}
17. [].splice.call(obj2,2,1,200,300);//從第三個(gè)參數(shù)開始是添加的元素

1. //3.借用構(gòu)造函數(shù)實(shí)現(xiàn)繼承
2. functionPerson(name,age){//父類構(gòu)造函數(shù)
3. this.name=name;
4. this.age=age;
5. }
6. // function Student(name,age,number){
7. // this.age=age;
8. // this.name=name;
9. // this.number=number;
10. // }
11. //優(yōu)化
12. functionStudent(age,name,number){//子類構(gòu)造函數(shù)
13. Person.call(this,name,age);//給構(gòu)造函數(shù)的實(shí)例,添加name,age兩個(gè)屬性
14. //this代表Student的實(shí)例
15. //Student構(gòu)造函數(shù)借用Person構(gòu)造函數(shù)
16. this.number=number;
17. }
18. var stu =newStudent(18,"zhangsan",12);
19. console.log(stu);
20. //注意條件:父類構(gòu)造函屬性要對子類對象通用

1. /*jQuery大結(jié)構(gòu)原理 init*/ ?
2. function jQuery(){
3. //init是一個(gè)構(gòu)造函數(shù),用于創(chuàng)建jQuery對象,并返回這個(gè)對象
4. returnnew jQuery.prototype.init();
5. }
6. jQuery.prototype={
7. constructor:jQuery,
8. init:function(){
9. returnthis;
10. },
11. css:function(){}
12. };
13. //init的原型指向jQuery的原型,這樣init創(chuàng)建的對象就可以使用jQuery原型中的方法了
14. jQuery.prototype.init.prototype=jQuery.prototype;

來自為知筆記(Wiz)

轉(zhuǎn)載于:https://www.cnblogs.com/itlyh/p/6012095.html

總結(jié)

以上是生活随笔為你收集整理的函数的四种调用模式.上下文调用.call.apply的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。