js函数调用方式大概可分为:函数调用,构造器调用,call或apply,方法调用四种方式。下面结合一些基础概念和实测代码,从函数调用的角度,探讨JavaScript中this的用法。

1. new对函数调用的影响

先看JScript手册中对new和构造函数的解释:

实测:

function Fun1(){
console.log(this);
}
new Fun1();//构造器调用方式
Fun1();//函数调用方式
window.Fun1();

结论:构造器方式this指向函数本身;函数调用方式,this指向全局对象window。Fun1()是window.Fun1()的简写,Fun1()是window的方法。

2.使用call或apply

JScript手册的解释:

实测:

    function Fun1(x){
console.log(x,this);
} function Fun2(x){
console.log(x,this);
} Fun1.call(window,0);
Fun1.call(Fun2(1),11);
Fun1.call(new Fun2(2),22);
Fun1.apply(window,[3]);

结论:

通过call或apply调用函数,被调用的函数的this指向第一个参数指向的this。

apply和call作用相同,但参数上有区别。apply的第二个参数可以传入一个函数的arguments对象。

3.方法调用模式

调用形式如:对象名.方法名()的函数调用模式。比如实例中的a.f(5)。

实测:(四种调用都在了)

    function Fun1(x){
console.log(x,this);
} function Fun2(x,y){
Fun3.apply(this, arguments);//apply和arguments结合使用
return{ f:Fun1 };
} function Fun3(x,y){
console.log(x,y,this);
} var a = Fun2(1,2);
var b = new Fun2(3,4);
a.f(5);
b.f(6);

此例中,函数Fun2返回了一个对象{f:Fun1},所以a,b都指向了该对象,进而Fun1中的this指向对象{f:Fun1}。

结论:方法调用模式下,this指向方法所属的对象。

总结:this指向的对象是在函数调用的时候决定的,通过函数调用方式,可以推断出this。

现在回过头来看一下,在JScript手册中,this语句的解析如下:

嗯,对上面的解释基本没有疑惑。附上手册

从函数调用的角度,探讨JavaScript中this的用法的更多相关文章

  1. 用自然语言的角度理解JavaScript中的this关键字

    转自:http://blog.leapoahead.com/2015/08/31/understanding-js-this-keyword/ 在编写JavaScript应用的时候,我们经常会使用th ...

  2. JavaScript中return的用法详解

    JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...

  3. JavaScript中this的用法详解

    JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...

  4. JavaScript中this的用法 及 如何改变this的指向

    要懂得JavaScript中this的用法,首先需要知道,JavaScript中的作用域相关知识. var fun = function(){ var flag = 1; console.log(fl ...

  5. javascript中 try catch用法

    javascript中 try catch用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-08-16我要评论 JS try catch语句一般在什么情况下使用?是必须使 ...

  6. 在HTML页面中实时获取新消息的方法 “JavaScript中的setInterval用法”

    JavaScript中的setInterval用法(资料来源:博主---八神吻你   ) setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数 ...

  7. 小谈JavaScript中this的用法

    "this"关键字是JavaScript中广泛应用的一种特性,但它经常也是这门语言中最容易混淆和误解的特性.那么"this"的实际意义是什么?它是如何求值的? ...

  8. JavaScript 中 this 的用法

    在 JavaScript 中,this 是动态绑定,或称为运行期绑定的.一般而言,在Javascript中,this 指向函数执行时的当前对象. 由于其运行期绑定的特性,JavaScript 中的 t ...

  9. JavaScript中一些怪异用法的理解

    引言 JavaScript这门语言有些场合的用法还是比较怪异的.这篇文章会尽量将这门语言特有的一些比较特殊的用法收集在一起.就当是平时开发时需要注意的地方吧. 特殊用法收集 1.!!用法 在JavaS ...

随机推荐

  1. BNU-2017.7.4排位赛2总结

    链接:https://www.bnuoj.com/v3/contest_show.php?cid=9147#info A题 sort之后交换首尾两个数. B题 for一遍,如果每个数都在对应位置了,输 ...

  2. JSP 脚本中的 9 个内置对象

    JSP 脚本中包含了 9 个内置对象,这 9 个内置对象都是 Servlet API 接口的实例,只是 JSP 规范对它们进行了默认初始化. 这 9 个内置对象如下: 1.application:ja ...

  3. lightoj 1020 (博弈水题)

    lightoj 1020 A Childhood Game 链接:http://lightoj.com/volume_showproblem.php?problem=1020 题意:一堆石子有 m 个 ...

  4. Redis实战(六)管道

    https://www.cnblogs.com/huangxincheng/p/6212406.html

  5. LintCode 397: Longest Increasing Continuous Subsequence

    LintCode 397: Longest Increasing Continuous Subsequence 题目描述 给定一个整数数组(下标从0到n - 1,n表示整个数组的规模),请找出该数组中 ...

  6. 【BZOJ】1711: [Usaco2007 Open]Dining吃饭

    [算法]最大流 [题解] S连向食物连向牛连向牛‘连向饮料连向T. 经典的一个元素依赖于两个元素的建图方式. #include<cstdio> #include<algorithm& ...

  7. el-option > 1500 条时的卡顿问题

    本文地址: http://www.cnblogs.com/veinyin/p/8473938.html  在做项目时遇到的一个问题. 项目是基于 Vue 框架做的. select 的 option 是 ...

  8. TypeScript在node项目中的实践

    TypeScript在node项目中的实践 TypeScript可以理解为是JavaScript的一个超集,也就是说涵盖了所有JavaScript的功能,并在之上有着自己独特的语法.最近的一个新项目开 ...

  9. 某团队线下赛AWD writeup&Beescms_V4.0代码审计

    还是跟上篇一样.拿别人比赛的来玩一下.  0x01 预留后门 连接方式: 0x02 后台登录口SQL注入 admin/login.php 在func.php当中找到定义的check_login函数 很 ...

  10. sqlite3使用简介

    sqlite3使用简介 一.使用流程 要使用sqlite,需要从sqlite官网下载到三个文件,分别为sqlite3.lib,sqlite3.dll,sqlite3.h,然后再在自己的工程中配置好头文 ...