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

最新推荐文章于 2022-04-12 01:31:36 发布

打杂人

最新推荐文章于 2022-04-12 01:31:36 发布

阅读量367

点赞数

本文为 aerchi/乐意黎原创文章，未经允许不得镜像、采集博客内容。如有转载, 请注明文章来源。

本文链接：https://blog.csdn.net/aerchi/article/details/89499329

版权

Web 服务器专栏收录该内容

68 篇文章 1 订阅

订阅专栏

首先，来看下面的代码:

var param = "i am out param";
var o={
	param: "i am a inner param",
	output:function(){
		console.log("Output");
	},
	echo:function(param){
		debugger;
		this.param;
		console.log("i am echo: "+param);
    },
    print:function print(param){
		debugger;
		this.param;
		console.log("i am print: "+param);
    }
}

this //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

this.param //"i am out param"

param //"i am out param"

typeof o  //"object"

o.param //"i am a inner param"

typeof o.param //"string"

o.output() //Output

o.output("test") //Output

typeof o.echo //"function"

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

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"

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"

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"

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

结果:

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"

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"

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

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

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

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

var o={
	echo:function(param){
		debugger;
		this.param;
		console.log("i am echo: "+param);
    },
    print:function print(param){
		debugger;
		this.param;
		console.log("i am print: "+param);
    }
}

乐意黎
2019-04-24