js函数—隐形参数this
前言
this是函数中的隐形参数,它绑定的值取决于函数的调用位置。
this的定义
《你不知道的js》中是这样说的:是函数体内的隐式参数,this就是记录函数调用上下文的一个属性。可以在函数体中使用this引用函数的调用上下文。this的绑定关注的是函数的调用位置。
调用位置:是函数在调用时的位置,区别于函数声明时的位置。
this的绑定规则
this绑定方式取决于函数的调用位置,根据不同的场景,有四中绑定方式(默认、隐式、显示、构造调用中的绑定)。多种情况同时存在时,依靠的是这四中规则的优先级别采用相应的绑定。
默认绑定
当函数不使用任何修饰时直接调用。无论在哪里调用,它指向的都是全局对象(浏览器环境下指向的是window)。注:严格模式下this会绑定到undefined。
function run(){
console.log(this); //window
console.log("running");
function speak(){
console.log("speak");
console.log(this); // window
}
return speak;
}
run()();
隐形绑定
当函数拥有上下文对象的时候,隐式绑定规则会把函数调用中的this绑定到这个上下文对象。
// 对象的属性不管以任何形式拥有函数的引用时,通过对象属性调用这个函数时,这个函数当前调用上下文就是这个对象。
function foo(){
console.log(this.a);
}
var obj = {
a:1,
foo:foo
}
obj.foo(); // 1
// 直接上下文:只有最后一层调用影响this的绑定
function foo(){
console.log(this.a);
}
var obj1 = {
a:1,
foo:foo
}
var obj2 = {
a:2,
obj1:obj1
}
obj2.obj1.foo(); // 1
显示绑定
直接指定this的绑定对象就叫做显示绑定。js中所有函数都从Function.prototype上继承了call和apply这两个方法。他们都是用来显示指定函数执行时其中的this的。
call和apply的异同:
目的相同:都用来指定函数执行时其中的this。
参数个数和类型不同:apply接收两个参数,第一个是本次执行要绑定在函数this上的值,第二个是一个数组。call接收的是一个参数列表,参数需要一个一个的传,他会把第一个参数绑定到本次执行函数的this上去。
参数的处理:apply会把第二个参数(Array类型)展开后依次传到本次执行的函数中去。call是取第一绑定到this,再把后面的参数依次传入本次执行函数。
注:argument是函数体中的另一个隐式参数。可以在函数体内拿到函数运行时,接收到的实参。它是一个伪数组,其中的元素和实参一 一对应
// 以下输出结果出自chrome
function test(){
console.log(test.arguments);
}
// apply 数组[1,2,3]被展开分成三个参数 依次传入 test。
test.apply({},[1,2,3]); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// call 数组[1,2,3] 作为一个参数传进了test中
test.call({},[1,2,3]); // Arguments [Array(3), callee: ƒ, Symbol(Symbol.iterator): ƒ]
常用操作
// 使用call调用数组map方法。
var arr = [1,2,3,4];
Array.prototype.map.call(arr,function(item){
console.log(item); // 分别输出 1 2 3 4
})
new绑定
使用new 操作符调用函数叫做构造调用。函数做构造调用时,其中this的绑定。函数做构造调用时其中有四个默认操作。
1,创建一个新的对象。
2,这个对象会被执行原型链接(添加到构造函数的原型链的末尾)。
3,把当前正在做构造调用的函数中的this绑定到新创建的对象。
3,如果函数没有显式的返回其他对象,那么默认返回这个新建的对象。
// 对foo进行构造调用创建一个新的对象
function foo(a){
this.a = a;
}
var bar = new foo(2);
console.log(bar.a);
js中的构造函数
1,只是使用new操作符调用的普通函数。
2,不属于某个类,也不会实例化某个类。
3,所有函数使用new 进行调用时都被称作构造调用。
4,js中不存在面向类语言意义上的构造函数,只有基于new操作符号的构造调用。
js函数—隐形参数this的更多相关文章
- js函数的参数
js函数的参数: js是弱类型的编程语言,调用函数时既不在乎函数的参数,也不在意参数的类型 即便你定义的函数值接受两个参数,在调用这个函数时也未必一定要是两个参数.可以传递一个.三个甚至不传递参数,而 ...
- js函数定义 参数只要写名称就可以了
js函数定义 参数只要写名称就可以了 以下为标准: function add(type) { } 不要写成下面这个样子 function add(var type) { } 哎 妹的 老何ja ...
- js函数中参数的传递
数据类型 在 javascript 中数据类型可以分为两类: 基本类型值 primitive type,比如Undefined,Null,Boolean,Number,String. 引用类型值,也就 ...
- JS函数的参数对象arguments在严格模式下的限制
在JS中,传入的函数的参数个数可以与定义函数的个数不一致,那么对于传入的实参的引用,则是arguments对象.然而改对象在严格模式和非严格模式下是由区分的: 1 在严格模式下arguments作为了 ...
- js 函数作为参数+接受任意数量参数
javascript中的函数是“复合数据类型”,又成为“引用类型”.引用类型的变量指向存储单元中存放的是它们的实际存放地址.函数名是对函数的一种引用.var a=max_num ;a()就可以调用fu ...
- Node.js函数介绍(参数为一个函数)
在JavaScript中,一个函数可以作为另一个函数的参数.我们可以先定义一个函数,然后传递,也可以在传递参数的地方直接定义函数. Node.js中函数的使用与Javascript类似,举例来说,你可 ...
- js函数定义参数个数和实际传入参数的对比
因为js是一种弱类型的编程语言,对数据类型的要求没有其他编程语言的要求严格,所以在定义函数的时候不需要像java和C#一样对其传入参数的类型进行定义.那么传入参数的个数有没有影响呢?今天小猪就做了个实 ...
- JS函数 有参数的函数 参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔开
有参数的函数 上节中add2()函数不能实现任意指定两数相加.其实,定义函数还可以如下格式: function 函数名(参数1,参数2) { 函数代码 } 注意:参数可以多个,根据需要增减参数个数.参 ...
- JS函数传递参数是是按值传递
JavaScript在传参的时候只有一种传递方法那就是按值传递(来自红宝书第四版本) 函数在传递参数的时候会把实参的值拷贝过来一份,而基础类型数据值是存在内存中,在拷贝的时候会复制出来一份,而引用类型 ...
随机推荐
- (C)结构数组
结构数组 对于大小相同但是类型不同的数组,定义结构体数组对其很有帮组.例如: char *keyword[NKEYS]; int keycount[NKEYS]; 这两个数组大小相同,因此 可以用另一 ...
- vue.use解析
vue.use源码: Vue.use = function (plugin) { /*判断插件是否已引入*/ if (plugin.installed) { return } //倒序为一个数组[] ...
- [BZOJ4557][JLOI2016]侦查守卫
4557: [JLoi2016]侦察守卫 Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 297 Solved: 200[Submit][Status ...
- java图形界面设计
1. 基本的java Frame操作. Java的图形界面的类主要包括AWT和Swing.在AWT中图形元素的父类为Component. 继承关系如下:Component->Cont ...
- ping: sendto: Network is unreachable【转】
本文转载自:http://blog.sina.com.cn/s/blog_640531380102wmzb.html 在我的板子上ping路由上的IP的时候可以ping通,但是ping外网的IP的时候 ...
- HDU 4405 Aeroplane chess:期望dp
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4405 题意: 你在下简化版飞行棋... 棋盘为一个线段,长度为n. 上面有m对传送门,可以直接将你从a ...
- 关于MVC模板渲染的一点小事type="text/template"
先上一个demo,简单粗暴,请自便 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- laravel基础课程---6、请求(如何获取当前 HTTP 请求的实例)
laravel基础课程---6.请求(如何获取当前 HTTP 请求的实例) 一.总结 一句话总结: 依赖注入:通过依赖注入的方式来获取当前 HTTP 请求的实例:public function sto ...
- 分享知识-快乐自己:SpringMvc中的四种数据源及相关配置(整合快速集成开发)
数据库连接: jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://39.105.105.186:3306/SpringMybatis?us ...
- 集训Day5
生活还得继续 bzoj3771 题面让我笑了很长时间 给出 n个物品,价值为别为Xi且各不相同,现在可以取1个.2个或3个,问每种价值和有几种情况? *顺序不同算一种 很傻逼的一个母函数+容斥,用A( ...