1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < title > Title</ title >
6+ < style type ="text/css ">
7+ div {
8+ width : 100px ;
9+ height : 100px ;
10+ }
11+ p {
12+ width : 100px ;
13+ height : 100px ;
14+ }
15+ </ style >
16+ < script >
17+ // 【 call 、 apply 、 bind 】
18+
19+ // JS中的上下文 context：即执行环境this
20+
21+ // call & apply & bind 可以修改函数调用上下文 this 的值，指向第一个参数（修改函数的调用方式）
22+ // apply func.apply(obj,[arg1, arg2, ..., argn]]) // 改变this指向后执行
23+ // call func.call(obj, arg1, arg2, ..., argn) // 改变this指向后执行
24+ // bind funcNew = funcOld.bind(obj) // 直接返回改变了this指向的新函数
25+
26+ // 【 区别 】
27+ // call 在形参个数确定时使用
28+ // apply 在形参个数不确定时使用
29+
30+ // 【 细节1: 自动类型转换 】
31+ // call/apply 第一个参数为值类型时会自动转换成对应的对象（引用类型）然后赋值给this
32+ function fn ( ) {
33+ console . log ( '---------' )
34+ console . log ( this ) ;
35+ console . log ( this . valueOf ( ) ) ;
36+ console . log ( + this ) ; //转换Number
37+ console . log ( "" + this ) ; //转换String
38+ console . log ( '---------' )
39+ }
40+ fn . apply ( 1 ) ; // Number 1 1 1
41+ fn . apply ( "abc" ) ; // String abc NaN abc
42+ fn . apply ( true ) ; // Boolean true 1 true
43+ fn . apply ( undefined ) ; // window window NaN [object Window]
44+
45+ // 【 细节2: 普通模式与严格模式 】 apply/call结果相同
46+ // 当传入的第一个参数为 null 或 Undefined 的时候，普通模式会把 this 赋值为 window
47+ fn . call ( ) ; // 普通模式 this => window，严格模式 this => undefined
48+ fn . call ( null ) ; // 普通模式 this => window，严格模式 this => null
49+ fn . call ( undefined ) ; // 普通模式 this => window，严格模式 this => undefined
50+
51+ // 【 细节3: 参数1传递null时表示函数调用模式 】
52+ var max = Math . max . apply ( null , arr ) ; // this => window
53+
54+ /**
55+ * 【 应用1: 方法借用 】
56+ */
57+ // 还可以实现参数合并，即方法可以传多个参数
58+ arr1 = [ 1 , 2 , 3 ]
59+ arr2 = [ 4 , 5 , 6 ]
60+ // var arr = arr1.concat(arr2)
61+ var arr = [ ] . concat . apply ( arr1 , arr2 ) ;
62+ console . log ( arr ) ; // [1,2,3,4,5,6]
63+
64+ /**
65+ * 【 应用2: 伪数组转数组 】
66+ */
67+ // 案例1，自建伪数组
68+ var obj = {
69+ 0 : "a" ,
70+ 1 : "b" ,
71+ 2 : "c" ,
72+ length :3
73+ }
74+ var arr = [ ] . concat . apply ( [ ] , obj ) ;
75+ console . log ( arr ) // ['a','b','c']
76+ // 案例2，函数参数 arguments
77+ function foo ( ) { // arguments 伪数组不具有join方法，借用数组的join方法
78+ var str = [ ] . join . apply ( arguments , [ "-" ] ) ; // Array.prototype.join.apply(arguments,["-"]);
79+ return str ;
80+ }
81+ var str = foo ( 1 , 2 , "sunshine" , "csxiaoyao" ) ;
82+ console . log ( str ) ; // 1-2-sunshine-csxiaoyao
83+
84+ /**
85+ * 【 应用3: 判断变量类型 】
86+ */
87+ var arr = [ 1 , 2 , 3 ] ;
88+ function isArray ( obj ) {
89+ return Object . prototype . toString . call ( obj ) === '[object Array]' ;
90+ }
91+ console . log ( isArray ( arr ) ) ; // true
92+
93+ /**
94+ * 【 应用4: 借用构造函数实现继承 】
95+ */
96+ function Person ( ) {
97+ this . name = "csxiaoyao" ;
98+ }
99+ function Student ( ) {
100+ Person . apply ( this ) ;
101+ }
102+ var stu = new Student ( ) ;
103+ console . log ( stu . name ) ; // csxiaoyao
104+
105+ </ script >
106+ </ head >
107+ < body >
108+
109+ < div > </ div >
110+ < div > </ div >
111+ < p > </ p >
112+ < p > </ p >
113+ </ body >
114+ </ html >
0 commit comments