javascript 函数的4种调用方式与 this(上下文)的指向
前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!
javascript 中作用域链和 this(上下文)的指向是很容易混淆的,简单的说就是:
- 作用域链取决于函数声明的位置,函数声明之后,从函数内部往外,一直到window,这就是它的作用域链,与函数调用位置无关;
- this 指向函数调用时的对象,如果是独立调用,那就是指向 window,与函数声明的位置无关;
函数调用的方式有4种,this 也就有4种指向:
- 独立调用:func(),函数独立调用,this指向window,;
- 方法调用:obj.func(),函数作为obj的一个方法(属性)调用,this指向obj;
- 构造函数调用:new Func(),如果在一个函数前面带上 new 关键字来调用, 那么背地里将会创建一个连接到该函数的 prototype 的新对象,this指向这个新的对象;
- call、apply、bind调用:func.call(obj,value1,value2); func.apply(obj,[value1,value2]); func.bind(obj,value1,value2)(); func.bind(obj)(value1,value2); 动态改变 this 的指向 obj;
独立调用和方法调用
全局环境中,this 默认指向到 window;
函数独立调用(不论这个函数在哪调用),this 默认指向到 window;
当函数被作为对象的方法(对象的一个属性)调用时,this 指向该对象;
函数只有调用了之后才有 this 的概念,不然它只是代码而已,我们经常把函数传给一个变量,如果后面没加括号,就只是传了个函数,而不是执行结果;
<script type="text/javascript">
console.log(this === window);//true 全局环境中,this默认指向到window function abc(){
console.log(this === window);
}
abc();//true 函数abc独立调用(不论这个函数在哪调用),this默认指向到window function outer(){
function inner(){
console.log(this === window);
}
inner();
}
outer();//true 函数inner独立调用(不论这个函数在哪调用),this默认指向到window var o = {
m: function(){
return this;
},
n: function(){
function test(){
return this;
}
return test(); //函数test独立调用(不论这个函数在哪调用),this默认指向到window
}
};
console.log(o.m());//Object o{...} 当函数被作为对象的方法(对象的一个属性)运行时,this指向该对象
console.log(o.n());//Window{...} 函数test独立调用,this默认指向到window
</script>
当函数被作为对象的方法调用时,可以使用 this 访问自己所属的对象,所以它能从对象中取值或对对象进行修改;
this 到对象的指向发生在调用的时候,如果函数没有被调用,则不会更改对象的变量;
通过 this 可取得它们所属对象的上下文的方法称为公共方法;
<script type="text/javascript">
var o = {
a: 1,
m: function(){
return this;
},
n: function(){
this.a = 2;
//当函数被作为对象的方法调用时,可以使用this访问自己所属的对象,所以它能从对象中取值或对对象进行修改。
//this到对象的绑定发生在调用的时候。所以这里的函数 n 如果没有调用过,那么外部的 a 是不会被改变的
}
};
console.log(o.m().a);//1
o.n();
console.log(o.m().a);//2
</script>
如果想访问这个外部函数的 this 值,需要将 this 的值保存在一个变量里,内部函数就可以通过作用域链找到这个变量。
<script type="text/javascript">
var o = {
m: function(){
console.log(this); //{} 当函数被作为对象的方法(对象的一个属性)运行时,this指向该对象
},
n: function(){
console.log(this);//{} var that = this;
//如果想访问这个外部函数的this值,需要将this的值保存在一个变量里,内部函数就可以通过作用域链找到这个变量。 function test(){
console.log(this);//window
console.log(that);//{}
}
return test(); //函数test独立调用(不论这个函数在哪调用),this默认指向到window
}
};
o.m();
o.n();
</script>
构造函数调用
如果一个函数用 new 关键字调用,那么这个函数就是构造函数,并且背地里会创建一个连接到该函数的 prototype 的新对象,this 指向这个新对象;
如果构造函数没有形参,实例化的时候是可以不带()的;如 var a = Func; 或者 var a = Func(); 两种都可以;
同时我们在构造函数的时候有个约定(不是规范),首字母大写,以避免忘了写new关键字或者在普通函数前面加new;
new 关键字的作用就是执行一个构造函数,并返回一个对象实例。使用 new 命令,它后面的函数的函数调用和普通函数调用就不一样了,步骤如下:
- 创建一个空对象,作为将要返回的对象实例;
- 将空对象的原型 _proto_ 指向构造函数的 prototype 属性;
- 将构造函数内部的this关键字指向空对象;
- 执行构造函数内部的代码;
就是说 this 指向这个新对象,构造函数内所有针对 this 的操作,都会发生在这个新对象上;
<script type="text/javascript">
// 创建一个名为Person 的构造函数,它构造一个带有user 和age 的对象
var Person = function (user,age) {
this.user = user;
this.age = age;
}; // 构造一个Person 实例 ,并测试
var shane = new Person ('shane',25);
console.log(shane.user);//shane
console.log(shane.age);//25
</script>
javascript 中构造函数是不需要有返回值的,可以认为构造函数和普通函数之间的区别就是:构造函数没有 return 语句,普通函数可以有 return 语句;
构造函数使用 this 关键字定义变量和方法,当 this 遇到 return 的时候,会发生指向不明(调用结果不明)的问题:
- return 返回的不是一个对象,this 还是指向实例(新对象),调用结果也还是新对象;
- return 返回的是一个对象,this 就指向这个返回的对象,调用结果就是这个返回的对象;
- return 返回的是 null,this 还是指向实例,调用结果也还是新对象;
<script type="text/javascript">
var Person = function(){
this.user = 'shane';
return
}
var shane = new Person;
console.log(shane.user);//shane return没有返回值,this还是指向实例(新对象),调用结果也还是新对象; var Color = function(){
this.red = 'red';
return 'hello world';
}
var redColor = new Color;
console.log(redColor.red);//red return返回的是一个基本类型的字符串(原始值),this还是指向实例(新对象),调用结果也还是新对象; var Size = function(){
this.size = 'big';
return {};
}
var sizeBig = new Size;
console.log(sizeBig.size);//undefined return返回的是一个对象,this就指向这个返回的对象,调用结果就是这个返回的对象;
</script>
间接调用
通过 call()、apply()、bind() 方法把对象绑定到 this 上,叫做显式绑定。对于被调用的函数来说,叫做间接调用
- call、apply、bind三者的第一个参数都是this要指向的对象,
- bind 只是返回函数,还未调用,所以如果要执行还得在后面加个();call、apply 是立即执行函数;
- 三者后面都可以带参数,call 后面的参数用逗号隔开,apply 后面的参数以数组的形式传入;bind则可以在指定对象的时候传参,和 call 一样,以逗号隔开,也可以在执行的时候传参,写到后面的括号中;func.call(obj,value1,value2); func.apply(obj,[value1,value2]); func.bind(obj,value1,value2)(); func.bind(obj)(value1,value2);
<script type="text/javascript">
var add = function (a,b) {
return a+b;
}; var arr = [2,3]; var sum0 = add.apply(null, arr);//apply后面的参数以数组的形式传入
var sum1 = add.call(null,arr[0],arr[1]);//call后面的参数用逗号隔开
var sum2 = add.bind(null,arr[0],arr[1]);//bind后面的参数可以和call一样,用逗号隔开
var sum3 = add.bind(null); //bind调用的时候也可以在执行的时候传参 console.log(sum0);//5
console.log(sum1);//5
console.log(sum2);//function (a,b) {return a+b;}; bind只是返回函数,还未调用,
console.log(sum2());//5 所以bind调用的时候,如果要执行还得在后面加个()
console.log(sum3(arr[0],arr[1]));//5 bind调用的时候也可以在执行的时候传参
</script>
严格模式下
- 在严格模式下,未指定环境对象而调用函数,则 this 值不会转型为 window。 除非明确把函数添加到某个对象或者调用 apply() 或 call(),否则 this 值将是 undefined;
- 所以我们可以手动添加 window.函数(),将 this 指向 window;
<script type="text/javascript">
'use strict' //严格模式
function a(){
console.log (this);
}
a();//undefined
//在严格模式下,未指定环境对象而调用函数,则 this 值不会转型为 window , this 值将是 undefined。
//除非明确把函数添加到某个对象或者调用 apply()或 call()使用对象冒充。 window.a();//window
//所以我们可以手动添加 window.函数(),来改变this指向window (function(){
console.log(this);//undefined
})(); setTimeout(function(){
console.log(this);//Window
},0);
//setTimeout是window的一个方法(属性),所以这里可以写成window.setTimeout
//所以不管是严格模式还是非严格模式,setTimeout里的this始终指向window
//但是有时候我们会发现setTimeout中的this也有其他情况,这只是误导,当然如果你不确定的话,直接console.log(this)一下,分分钟解决
</script>
javascript 函数的4种调用方式与 this(上下文)的指向的更多相关文章
- javascript函数的4种调用方式
在javascript中一共有4种函数调用模式,分别是:方法调用模式.函数调用模式.构造函数调用模式和apply(call)调用模式,这4种模式的主要差异在于如何初始化关键参数this. 方法调用模式 ...
- js函数的四种调用方式以及对应的this指向
一.函数调用,此时this是全局的也就是window 1 var c=function(){ 2 alert(this==window) 3 } 4 c()//true 二.方法调用 var myOb ...
- JavaScript 函数的4种调用方法
JavaScript 函数有 4 种调用方式. 每种方式的不同方式在于 this 的初始化. 作为一个函数调用 function myFunction(a, b) { return a * b; } ...
- JavaScript函数的4种调用方法详解
在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:函数调用形式.方法调用形式.构造 ...
- JS高级. 06 缓存、分析解决递归斐波那契数列、jQuery缓存、沙箱、函数的四种调用方式、call和apply修改函数调用方法
缓存 cache 作用就是将一些常用的数据存储起来 提升性能 cdn //-----------------分析解决递归斐波那契数列<script> //定义一个缓存数组,存储已经计算出来 ...
- Javascript中函数的四种调用方式
一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...
- JavaScript 函数的两种声明方式
1.函数声明的方式 JavaScript声明函数有两种选择:函数声明法,表达式定义法. 函数声明法 function sum (num1 ,num2){ return num1+num2 } 表达式定 ...
- javascript this 代表的上下文,JavaScript 函数的四种调用形式
JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的 ...
- 第十篇----------javascript函数的三种定义方式及区别
javascript定义函数有3种方式: //3种函数定义方式,前两种常用 /** * 1,function 语句式 * 形式:句子 * 名称:有名 * 性质:静态 * 解析时机:优先解析 * 作用域 ...
随机推荐
- linux常用命令汇总(更新中...)
文本查看与编辑 1.文本编辑命令 vi/vim 2.查看文件内容命令 命令 说明 命令格式 参数 cat 将一个文件的内容连续输出在屏幕上 cat [-option] 文件名 -n:将行号一起显示在 ...
- 网络通信 --> Socket、TCP/IP、HTTP、FTP及网络编程
Socket.TCP/IP.HTTP.FTP及网络编程 聊聊Socket.TCP/IP.HTTP.FTP及网络编程
- C++迭代器的使用和操作总结
迭代器是一种检查容器内元素并遍历元素的数据类型.C++更趋向于使用迭代器而不是下标操作,因为标准库为每一种标准容器(如vector)定义了一种迭代器类型,而只用少数容器(如vector)支持下标操作访 ...
- QQ数据库管理
1,数据库关系图 ##用例1:查询数据 #01.查询QQ号码为54789625的所有好友信息,包括QQ号码,昵称,年龄 select RelationQQID as QQ号码,NickName as ...
- h5移动端屏幕适配
1.rem <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 关于JAVA开发工具IDEA使用
安装IntelliJ IDEA 一.安装JDK 1 下载最新的jdk,这里下的是jdk-8u66 2 将jdk安装到默认的路径C:\Program Files\Java目录下 二.安装IntelliJ ...
- shell命令总结一
简述:这篇总结是在360企业安全实习第一周学到的. Linux中的 2>&1 .if文件命令 .tr .$0等相关参数含义的用法 1. 2>&1 command>/d ...
- 配置tomcat8数据源(采用局部数据源方式)
tomcat提供两种数据源配置方式,全局和局部.全局的话对于所有web应用都生效,局部只对于配置的某一个web生效. 步骤: 1.将mysql的jdbc驱动复制到tomcat的lib路径下. 2.在t ...
- 在linux环境下安装JDK并配置环境变量
操作步骤如下 1.根据linux服务器的系统版本在官网下载相应linux版本JDK(32位下载x86,64位下载x64) 2.通过远程连接工具(filezilla)将下载好的JDK上传至linux服务 ...
- alpha-咸鱼冲刺day2-紫仪
总汇链接 一,合照 emmmmm.自然是没有的. 二,项目燃尽图 三,项目进展 今天并没有什么进展,弄了好久好像也只研究出怎么把JS的功能块插入进去.html的信息提交这些还不知道要怎么弄. 四,问题 ...