閉包:函數就是一個閉包,一個封閉的作用域;

返回函數,要返回多個函數就用一個對象封裝一下,
立即執行函數+return
回調函數 JS動態創建的DOM,不會被搜索引擎抓取,對SEO不友好.

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

1. //函數的四種調用模式
2. //上下文模式 call apply 借用的概念
3. function foo(){
4. }
5. //當foo函數聲明好了后無法確定foo函數的身份,只有在調用的時候
6. //才能確定foo的所屬;根據foo函數的執行情況和返回結果
8. //js中函數由四種不同的調用方式,其中this的指向,返回值由return決定(構造函數特殊)
9. //1.函數調用模式
10. foo();//本質就是使用window對象,調用;指向window
11. //2.方法調用模式,把函數當做對象的方法;this指向obj
12. var obj ={
13. fn:function(){
14. }
15. };
16. obj.fn();
17. obj['fn']();
18. //3構造函數調用 將函數當成構造函數來調用(new);this指向構造函數的實例
19. functionFoot(){}
20. newFoot();
21. //構造函數沒有return語句,返回的是構造函數的實例
22. //有return,return的內容是一個對象,返回值是return語句的對象;如果return的是基本數據類型,那返回值
23. //還是實例
24. functionFoot2(){
25. return[1,2,3];
26. }
27. var foot2=newFoot2();
28. console.log(foot2.__proto__);//Array.prototype ?Array[0]
30. //4.上下文調用模式,根據用戶傳遞的參數產生不同的結果 .this的值由調用者決定;
31. //call/apply 這兩個方法都是定義在Function.prototype中的方法,這樣任何函數都能訪問到這兩個方法
32. //調用模式,只有函數才能調用
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方法的第一個參數指的是本次調用該函數內部this的值
39. fn();//此時this指向window window有一個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決定,返回值是一個數組對象 //Array.prototype
8. var f2=new foo();//undefined
9. console.log(f2.__proto__);//Array.prototype

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

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

1. /*上下文模式借用內置方法*/
2. //數組里面的push方法實現的功能,向數組里面添加一個元素
3. //1.借用push方法,向偽數組中添加元素;[].push Array.prototype
4. //偽數組是沒有push方法的,首先我們要能訪問到push方法
5. var arr={1:10,2:28};
6. [].push.call(arr,10,20,30);
7. console.log(arr);
9. //jQuery對象也是偽數組
10. //向數組中添加元素的方法
11. //push
12. //arr[arr.length]
14. //2.借用數組的push方法向數組中添加元素
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. //數組的方法經常被偽數組所借用
3. //1.需求 將一個偽數組轉化為真數組:slice
4. var arr=[13,12,12,34];
5. arr.slice(1);//從索引1開始截取,到最后一個元素[12,12,34]
7. var obj ={0:"范明",1:"小沈陽",length:2};
8. [].slice.call(obj);//返回的是一個數組["范明","小沈陽"];
9. [].slice.call(obj,1);//返回的是一個數組["小沈陽"];
11. //2.刪除偽數組里面的元素
12. var obj2 ={0:"范明",1:"小沈陽",2:"沈陽",length:2};
13. //刪除數組中的第第三個元素,參數從第幾個開始刪,刪除幾個
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);//從第三個參數開始是添加的元素

1. //3.借用構造函數實現繼承
2. functionPerson(name,age){//父類構造函數
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. //優化
12. functionStudent(age,name,number){//子類構造函數
13. Person.call(this,name,age);//給構造函數的實例,添加name,age兩個屬性
14. //this代表Student的實例
15. //Student構造函數借用Person構造函數
16. this.number=number;
17. }
18. var stu =newStudent(18,"zhangsan",12);
19. console.log(stu);
20. //注意條件:父類構造函屬性要對子類對象通用

1. /*jQuery大結構原理 init*/ ?
2. function jQuery(){
3. //init是一個構造函數,用于創建jQuery對象,并返回這個對象
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創建的對象就可以使用jQuery原型中的方法了
14. jQuery.prototype.init.prototype=jQuery.prototype;

來自為知筆記(Wiz)

轉載于:https://www.cnblogs.com/itlyh/p/6012095.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。