[乐意黎]JS对象方法, Call调用及this上下文含义

我不是女神ヾ 2022-02-15 15:51 255阅读 0赞

首先，来看下面的代码:

--------------------

1. 直接调用  
调试：o.echo("out")   
从下图可见:  
在函数内部  
param = "out",  
this 代表当前O对象，this.param = "i am a inner param"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70][]

o.echo("out")  
    //i am echo: out

--------------------

2. 使用print(this, 外部定义参数) 调用

o.print(this, param)

从下图可见:  
在函数内部 function print(param)  
此时的param 为当前 window对象, 即o.print(this, param) 中的 this  
函数内部的this 代表当前O对象，this.param = "i am a inner param"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1][]

o.print(this, param)
    // i am print: [object Window]
    
    param 
    //"i am out param"

--------------------

3. 使用 call(参数) 调用  
o.echo.call("out param")  
从下图可见:  
在函数内部 param = undefined  
函数内部的 this 代表当前传入参数 "out param"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2][]

o.echo.call("out param") 
    //i am echo: undefined

--------------------

4. 使用Call(this, 当前参数) 调用  
var param = "i am out param";  
o.echo.call(this, "out param")  
注意:  
在函数内部  
此时 this 表示 Window对象  
param 为函数传入参数 "out param"  
this.param 表示外部定义参数 var param = "i am out param";  
this.o.param = "i am a inner param"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 4][]

此时的 this.param ===window.param

![2019042417223660.png][]

结果:

o.echo.call(this, "out param")
    // i am echo: out param

--------------------

5. 使用Call(this, 外部定义参数) 调用  
var param = "i am out param";  
o.echo.call(this, param)

注意:  
在函数内部  
此时 this 表示 Window对象  
param 为函数传入参数 "i am out param"  
this.param 表示外部定义参数 var param = "i am out param";  
this.o.param = "i am a inner param"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 5][]

o.echo.call(this, param)
    // i am echo: i am out param

--------------------

6. 直接调用  
调试：o.print()   
从下图可见:  
在函数内部  
param= undefined  
this 代表当前O对象，this.param = "i am a inner param"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 6][]

o.print()
    // i am print: undefined

--------------------

7. 使用Call(this, 外部定义参数) 调用  
var param = "i am out param";  
o.print.call(this, param)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 7][]

o.print.call(this, param)
    // i am print: i am out param

总结：  
由上可知: echo 省略了方法名, print 加了方法名 O.echo 和 O.print的定义是相同的。

--------------------

乐意黎  
2019-04-24

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20220215/b7a077b2e79b458b838ba8a99f67beed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: /images/20220215/fcc3e007ef1f4c82bb201049f23614a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2]: /images/20220215/a5bdf160e52e45258a09deeb01582012.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 3]: /images/20220215/b839580f5c7a4e3ea6ff1ac57881085a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 4]: /images/20220215/53f72438239b427b91a412bc0307aa6f.png
[2019042417223660.png]: /images/20220215/966acdb2e68a4a05a1bef1eca99d6dc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 5]: /images/20220215/99534ac36586457e8d8e89b88c4c88b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 6]: /images/20220215/6df70b43758541c1880a6c24c2520c31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 7]: /images/20220215/27f86b6078d94dbfbb7204e173d4dd49.png