本博客参考
js中函数的调用方法
- 简单调用
function say(){
console.log(this)
}
//简单调用
say()
- 对象调用
将要定义的函数放到一个对象里面定义，此时是的函数是一种对象方法
var obj={
say:function(){
console.log(this)
}
}
//对象调用
obj.say()
- 构造函数调用
var obj = new say();
- 内置方法调用
通过call()方法或apply()方法调用
say.call()
关于this
总结：指向一个对象，该对象被称为函数执行时的上下文对象
一种理解方法
下面我们要做的事情如下
- 先定义一个公共函数，用于输出该函数上文对象的名称属性
- 再定义两个对象，在这两个对象的内部调用上面的公共函数（对象方法），输出这两个对象的名称属性
- 依次调用公共函数和两个对象的对象方法，查看输出结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个html5 demo</title>
</head>
<body>
<script>
//定义一个全局变量
var name="张三"
//定义一个函数
function saymyname(){
console.log(this.name)
}
//定义对象1
var obj1={
name:"李四",
say:saymyname
}
//定义对象2
var obj2={
name:"王五",
say:saymyname
}
//函数的简单调用方法：此时saymyname()函数中的this指向window对象
//相当于window.saymyname()
saymyname()
//以对象方法形式调用函数：此时saymyname()函数中的this指向obj1对象
obj1.say()
//以对象方法形式调用函数：此时saymyname()函数中的this指向obj2对象
obj2.say()
</script>
</body>
</html>
Chrome浏览器运行结果
this关键字的另外一种理解
在面向对象的概念中，this相当于一个“指针”
- 在函数中，this会指向当前调用函数的元素
- 如果没有元素调用函数，this会指向window
在上面的例子中，我们根据这种理解方法进行分析
//没有元素调用函数，this指向window（实际上是window对象调用了saymyname()函数，所以this指向window）,this.name相当于window.name
saymyname()
//obj1调用saymyname()函数，此时this指向obj1对象，this.name相当于obj1.name
obj1.say()
//obj2调用saymyname()函数，此时this指向obj2对象，this.name相当于obj2.name
obj2.say()
我们稍微修改一下上面的例子来验证我们的理解（重写saymyname()函数，使其输出this关键字的指向）
function saymyname(){
console.log(this)
}
Chrome浏览器的运行结果
改变指向的方法
call()方法
实际上，call()方法是js中的一种调用函数的内置方法，可用于this的指向，使用格式
函数1.call(新指向,参数1,参数2,...)
示例
var m=2,n=3
function foo(n1,n2){
console.log(this)
console.log(n1+n2)
}
//第一次调用函数
foo(m,n)
//第二次调用函数
foo.call(document,m,n)
Chrome浏览器运行结果
apply()方法
apply()和call()的作用类似，只不过apply()的第二个参数必须是一个数组，而call 第二个参数可以是任意类型。
函数2.apply(新指向,[参数])
我们将上面的例子稍加修改
var m=2,n=3
function foo(n1,n2){
console.log(this)
console.log(n1+n2)
}
foo(m,n)
foo.apply(document,[m,n])
Chrome浏览器运行结果
bind()方法
该方法使用后会返回一个新函数（相当于原函数的拷贝，this指向改变，但是原函数不变），使用格式
函数.bind(新指向)(参数1,参数2,...)
//相当于
var 新函数=函数.bind(新指向)
新函数(参数1,参数2,..)
扫一扫
879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
