JavaScript 中7种函数调用方式及对应this值

this 在 JavaScript 开发中占有相当重要的地位,不过很多人对this这个东西都感觉到琢磨不透。要真正理解JavaScript的函数机制,就非常有必要搞清楚this到底是怎么回事。


函数调用方式不同,this 含义也跟着不同。JavaScript语言中有七种调用函数方式:
 
第一种:调用方法
var obj = {
    method: function() { alert(this === obj); }
}
obj.method();
上面这行obj.method()显然method是作为方法被调用,这种情况下,函数体中的this绑定的就是method的宿主对象,也就是obj。
从这种调用方式我们得出第一定律:
第一定律:以方法方式调用函数,this则绑定宿主对象。

第二种:调用全局函数
var method = function(){alert(this === window);}
method();
上面这个函数是个全局函数。我们知道,全局变量或函数都相当于window对象的属性。也就是说,上面这句实际上等同于下面这句:
window.method = function(){alert(this === window);}
window.method();
既然这样,那么这里 this 绑定到 window 对象就显而易见,很容易理解了。相当于方法调用模式的一个特例,并不违背第一定律。

第三种:全局函数内调用内部函数

var m_ext = function() {
    alert(this === window);
    var m_inner = function() {
        alert(this === window);
    }
    m_inner();
}
m_ext();
执行上面这段代码,你会惊讶的发现,两个布尔表达式的值都是真。也就是说子函数孙函数,只要是以函数的方式调用,this 就铁了心绑定 window 对象了。从这种调用方式我们得出第二定律:
第二定律:不论子函数孙函数,只要是以函数的方式调用,this 就铁了心绑定 window 对象。

第四种:方法内调用内部函数

var obj = {};
obj.method = function() {
    alert(this === obj);
    var m_inner = function() {
        alert(this === window);
    }
    m_inner();
}
obj.method();
执行上面这段代码,第一个this绑定到obj你不奇怪,第二个this绑定到window其实也不奇怪。它仍然遵守第二定律,也就是不论子函数孙函数,只要是以函数的方式调用,this 就铁了心绑定 window 对象。

第五种:作为构造函数调用

function Person(name, age){
    this.name = name;
    this.age = age;
}
var john = new Person('John', 38);
alert(JSON.stringify(john));
你会说,哇,这很眼熟。生成某个类的新对象啊。Javascript就是这么另类,函数确实可以这么调。
这次弹出的是这样一个字符串:{"name":"John","age":38}。哇,这次我明明没在函数定义里写return 语句,它却主动返回了一个对象给我。没错,即便你在函数定义里return某个东西,它也不会理你。(注意:如果你return一个function就会有惊喜,不信你试试看)。从这种调用方式我们得出第三定律:
第三定律:如果在一个函数本身没有返回值,在其前面加上 new 调用,就会创建一个连接到该函数 prototype 属性的新对象,再把 this 绑定到该对象,然后执行该函数,最后返回该对象。如果该函数有返回值,且返回值为字符串/数字/布尔值等简单对象的话,该返回值会被丢弃。但如果该函数的返回值为对象,函数或者数组等复杂对象的话,该函数则会返回该返回值,抛弃this绑定的对象。据我测试,如果返回值是一个函数时,该函数会返回undefined。我暂时还不知道为什么会这样。

第六种:用函数对象的apply方法调用

var my_concat = function(stra, strb){
    alert(this);
    return stra + '' + strb;
}
var param = ['hello', ' world']
alert(my_concat.apply('bullshit', param));

你一定注意了,在这里 this 绑定的是apply方法的第一个参数 'bullshit'。从这里我们得出第四定律:
第四定律:用方法的apply/call方法调用方法时,this 则被绑定到apply/call方法的第一个参数。
想谁就是谁,嗯,吴妈也行。JavaScript的程序员们好幸福哦。

第七种:用函数对象的call方法调用
var my_concat = function(stra, strb){
    alert(this);
    return stra + '' + strb;
}
alert(my_concat.call('bullshit', 'hello',' world'));

对啦,你或许会多问一句,apply 的第二个参数有什么规定?call方法和apply又有什么不同?嗯 ,真是勤学好问,我就再啰嗦一下说说apply和call:

apply 和 call 的区别:

apply要求第二个参数必须是数组。否则就会报
 TypeError: second argument to Function.prototype.apply must be an array. 而call则没这么严格啦,第二个参数要什么类型?随意啦,还可以有第三个第四个第五个第六个....啦。

我想我说的够清楚了。感谢《JavaScript The Good Parts》和《JavaScript Definitive Guide》,要不然我也弄不明白呢!

转自: http://blog.sina.com.cn/s/blog_621f1e120100rj21.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue的增删改查函数可以通过以下方式进行调用: 1. 增加数据: ```javascript // 在Vue实例定义一个addData方法 methods: { addData() { // 向数据数组添加一条新数据 this.dataList.push({ name: 'New Data', age: 20 }); } } ``` 2. 删除数据: ```javascript // 在Vue实例定义一个removeData方法 methods: { removeData(index) { // 从数据数组删除指定索引的数据 this.dataList.splice(index, 1); } } ``` 3. 修改数据: ```javascript // 在Vue实例定义一个updateData方法 methods: { updateData(index, newData) { // 修改指定索引的数据 this.dataList.splice(index, 1, newData); } } ``` 4. 查询数据: ```javascript // 在Vue实例定义一个getData方法 methods: { getData(index) { // 返回指定索引的数据 return this.dataList[index]; } } ``` 以上示例,`dataList` 是存储数据的数组,`index` 表示数据在数组的索引,`newData` 表示新增数据。在实际应用,可以根据具体情况进行调整。 ### 回答2: Vue的增删改查函数调用是通过使用Vue的方法和指令来实现的。 增加(Create)数据:可以通过在Vue实例定义一个data对象,然后在方法使用this来访问和改变data的数据。比如,可以使用methods选项的一个方法来添加一个新的数据到data。 删除(Delete)数据:可以使用Vue的v-on指令来监听一个事件,然后在事件处理程序删除指定的数据。比如,可以在模板添加一个按钮,并在按钮的点击事件处理程序删除对应的数据。 更新(Update)数据:可以使用Vue的v-model指令来绑定表单元素和data的数据,这样当表单元素的发生变化时,对应的data的数据也会得到更新。此外,也可以定义一个方法来更新data的数据。 查询(Retrieve)数据:可以通过在Vue实例定义一个computed属性来实现数据的查询。computed属性会自动计算所依赖的data,并当data发生变化时,自动更新。可以在模板使用computed属性来展示数据。 总结来说,Vue的增删改查函数调用主要依赖于Vue实例的data和methods选项,使用这些选项来定义和操作数据。另外,也可以使用Vue的指令和computed属性来实现一些特定的功能,比如监听事件、绑定表单元素和进行数据的计算和查询。 ### 回答3: Vue的增删改查函数是在开发Web应用过程经常用到的基本操作。下面我将简要介绍一下这些功能的函数调用。 1. 增加操作: 我们可以使用Vue的数据绑定机制来实现增加操作。首先,我们需要在Vue实例定义一个数组或对象作为数据源。然后,通过表单输入或其他方式获取到新增的数据,并将其添加到数据源。这样,数据源的改变会自动触发Vue的响应机制,更新视图。 2. 删除操作: 删除操作也是通过Vue的数据绑定机制来实现的。我们可以在视图使用v-for指令将数据源的每一项渲染到页面上,并为每一项绑定一个删除按钮。当点击删除按钮时,我们可以通过Vue的事件处理机制调用一个删除函数,将对应的数据从数据源删除。Vue会自动更新视图,实现删除操作。 3. 修改操作: 修改操作也是通过Vue的数据绑定机制来实现的。和删除操作类似,我们可以通过v-for指令将数据源的每一项渲染到页面上,并为每一项绑定一个修改按钮。当点击修改按钮时,我们可以通过Vue的事件处理机制调用一个修改函数,将对应的数据修改。Vue会自动更新视图,实现修改操作。 4. 查询操作: 查询操作可以通过Vue的计算属性来实现。我们可以在Vue实例定义一个计算属性,根据特定的条件对数据源进行过滤,返回查询结果。在视图,我们可以使用v-model指令将查询条件与计算属性绑定,当查询条件改变时,计算属性会自动更新,返回新的查询结果。这样,我们就可以实时获取符合条件的数据。 总而言之,Vue的增删改查函数调用主要是基于Vue的数据绑定和事件处理机制进行的。我们可以通过这些函数实现对数据的动态操作,并实时更新视图。这些函数的调用方式各有不同,但都是基于Vue实例和其提供的功能来完成的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值