一 , this的默认绑定
当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定:绑定到全局的window对象.
一个例子
function fire () {
// 我是被定义在函数内部的函数哦!
function innerFire() {
console.log(this === window)
}
innerFire(); // 独立函数调用
}
fire(); // 输出true
//即使函数innerFire是包含在函数fire里面的,但是由于函数innerFire是独立调用,所以函数innerFire内的this还是指向window.
二 , this的隐式绑定
当函数被一个对象“包含”的时候,我们称函数的this被隐式绑定到这个对象里面了,这时候,通过this可以直接访问所绑定的对象里面的其他属性
第一个例子
var obj = {
a: 1,
fire: function () {
console.log(this.a)
}
}
obj.fire(); // 输出1
//函数fire包含在对象obj里,所以this就隐式绑定到对象obj.this就可以访问obj的属性.
第二个例子
// 我是第一段代码
function fire () {
console.log(this.a)
}
var obj = {
a: 1,
fire: fire
}
obj.fire(); // 输出1
// 我是第二段代码
var obj = {
a: 1,
fire: function () {
console.log(this.a)
}
}
obj.fire(); // 输出1
//这个例子说明了函数被定义在对象内部和外部没有任何区别.也说明了this绑定是动态的(在运行时绑定而不是书写时)
隐式绑定丢失的问题
一个例子
var obj = {
a: 1, // a是定义在对象obj中的属性 1
fire: function () {
console.log(this.a)
}
}
var a = 2; // a是定义在全局环境中的变量 2
var fireInGrobal = obj.fire;
fireInGrobal(); // 输出 2
可以这么理解,函数在成为对象的属性的时候,是具有独立性的.打个比方就像当初波兰加入了华约,波兰是华约的一份子,但他并不是华约缔造的.后来苏联解体,华约的一部分*范围,不是全部(俄罗斯就不是)变成了北约的*范围了.于是波兰加入了北约,和新的大哥混了.回到这个函数,对象obj
就是华约,函数fire
就是波兰,属性a:1
就是俄罗斯.现在,曾经的华约*范围obj.fire
变成了以世界警察fireInGrobal
为首的北约的地盘,于是波兰加入北约,听候大哥fireInGrobal
的差遣.大哥问,谁才是老大?fireInGrobal()
,波兰高呼Americana = 2
.
其实多数情况下,是不会发生this绑定丢失的,只有一种情况下会丢失,函数没有执行,当做值传递了。不管是赋值操作,还是当做回调函数的参数传递。
三 , this的显示绑定
在上一个例子中,fireInGrobal()
和obj.fire
调用的结果是不同的,在赋值过程中,this绑定丢失了.call就是为了解决这个问题的.
call的基本使用方式: fn.call(object)
fn : 上一例子中的 fireInGrobal
**object : 上一例子中的 obj
**
作用 : 大哥问谁是老大,波兰说是俄罗斯(重新把this
绑定回obj
)
一个例子
var obj = {
a: 1, // a是定义在对象obj中的属性
fire: function () {
console.log(this.a)
}
}
var a = 2; // a是定义在全局环境中的变量
var fireInGrobal = obj.fire;
fireInGrobal(); // 输出2
fireInGrobal.call(obj); // 输出1
每次执行都要加入call
吗?很麻烦.我们可以这样改一下
var obj = {
a: 1, // a是定义在对象obj中的属性
fire: function () {
console.log(this.a)
}
}
var a = 2; // a是定义在全局环境中的变量
var fn = obj.fire;
var fireInGrobal = function () {
fn.call(obj) //硬绑定
}
fireInGrobal(); // 输出1
如果使用bind
,会更简单
//上一个例子中的代码
var fireInGrobal = function () {
fn.call(obj) //硬绑定
}
//可以简化为
var fireInGrobal = fn.bind(obj);
call和bind的区别是:在绑定this到对象参数的同时:
1.call将立即执行该函数
2.bind不执行函数,只返回一个可供执行的函数
3.当然还有apply,他们的区别是这样的:
- 他们的作用一模一样,区别在于传入参数形式不同.
- apply接受两个参数,第一个指定this对象的指向,第二个参数为一个带下标的集合,这个集合可以为数组,也可以为类数组,apply把这个集合中的元素作为参数传递给被调用的函数.
var func = function( a, b, c ){
alert([a,b,c]); //输出[1,2,3]
};
func.apply( null, [ 1, 2, 3 ] );
- call传入的参数不固定,与apply相同的是,第一个参数也是代表函数体内的this指向,从第二个参数开始往后,每个参数被依次传入函数.
var func = function( a, b, c ){
alert([a,b,c]); //输出[1,2,3]
};
func.call( null, 1, 2, 3 );
- 当使用call或apply的时候,如果第一个参数是null,this会指向默认宿主对象,在浏览器中就是window.
四 , new绑定
执行new操作的时候,将创建一个新的对象,并且将构造函数的this指向所创建的新对象.
例子
function foo (a) {
this.a = a;
}
var a1 = new foo (1);
var a2 = new foo (2);
var a3 = new foo (3);
var a4 = new foo (4);
console.log(a1.a); // 输出1
console.log(a2.a); // 输出2
console.log(a3.a); // 输出3
console.log(a4.a); // 输出4
如果构造函数显式使用return
返回一个对象,那么调用表达式的值就是这个对象
var obj = {a:1};
function fn(){
this.a = 2;
return obj;
}
var test = new fn();
console.log(test);//{a:1}
this的四种绑定形式的更多相关文章
-
【javascript】函数中的this的四种绑定形式
目录 this的默认绑定 this的隐式绑定 隐式绑定下,作为对象属性的函数,对于对象来说是独立的 在一串对象属性链中,this绑定的是最内层的对象 this的显式绑定:(call和bind方法) n ...
-
【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子,我要讲故事啦~~
javascript中的this和函数息息相关,所以今天,我就给大家详细地讲述一番:javascript函数中的this 一谈到this,很多让人晕晕乎乎的抽象概念就跑出来了,这里我就只说最 ...
-
函数中的this的四种绑定形式
目录 this的默认绑定 this的隐式绑定 隐式绑定下,作为对象属性的函数,对于对象来说是独立的 在一串对象属性链中,this绑定的是最内层的对象 this的显式绑定:(call和bind方法) n ...
-
JavaScript函数中的this四种绑定形式
this的默认绑定.隐式绑定.显示绑定.new绑定 <script> //全局变量obj_value ; //1.window调用 console.log(`*************** ...
-
javascript——四种函数调用形式
此文的目的是分析函数的四种调用形式,弄清楚函数中this的意义,明确构造函对象的过程,学会使用上下文调用函数. 在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而 ...
-
JavaScript高级之函数的四种调用形式
主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...
-
Tensorflow 损失函数及学习率的四种改变形式
Reference: https://blog.csdn.net/marsjhao/article/details/72630147 分类问题损失函数-交叉熵(crossentropy) 交叉熵描述的 ...
-
this的四种绑定规则总结
一.默认绑定 1.全局环境中,this默认绑定到window 2.函数独立调用时,this默认绑定到window console.log(this === window);//true functio ...
-
Android颜色值(RGB)所支持的四种常见形式
Android中颜色值是通过红(Red).绿(Green).蓝(Blue)三原色,以及一个透明度(Alpha)值来表示的,颜色值总是以井号(#)开头,接下来就是Alpha-Red-Green-Blue ...
随机推荐
-
android控件 ToggleButton的应用
ToggleButton是android给我们提供的开关按钮, 有两种状态:选中和未选择状态. 以下是代码实例: main.xml [html] view plain copy <?xml ve ...
-
Correlation Filter in Visual Tracking
涉及两篇论文:Visual Object Tracking using Adaptive Correlation Filters 和Fast Visual Tracking via Dense Spa ...
-
PHP常用文件函数和目录函数整理
一.常用文件函数库 1.basename(); -- 返回路径中的文件名部分. string basename ( string $path [, string $suffix ] ) //给出一个包 ...
-
[luogu P3128][USACO15DEC]Max Flow [LCA][树上差分]
题目描述 Farmer John has installed a new system of pipes to transport milk between the stalls in his b ...
-
idea 右键无java class选项
项目中新建module之后,要在该目录下新增java Class文件,右键——>New发现无Java Class选项. File –Project Structure或者ctrl+alt+shi ...
-
mysql_day02
MySQL-Day01回顾1.MySQL的特点 1.关系型数据库 2.跨平台 3.支持多种编程语言2.MySQL的启动和连接 1.服务端启动 sudo /etc/init.d/mysql start| ...
-
札记:Property动画
简介 Android 3.0 (API level 11)引入了属性动画系统,它是一个完善的框架,可以用来对几乎任何对象进行动画.只需要指定要动画的对象属性,动画时长,属性值区间等,无论对像是否在屏幕 ...
-
[原创]DevOps 的技术栈和工具
[原创]DevOps 的技术栈和工具 版本控制:GitHub.GitLab.SubVersion 自动化构建和测试:Maven .Selenium.JMeter.Gradle 持续集成&交付: ...
-
mac下编译cpu only caffe并用xCode建caffe工程
mac编译caffe 好像又变容易了,直接git clone下载blvc源码,make.config里去掉了CPU_ONLY前面的注释,并没有安装任何依赖,也可能是自己mac上本来有, xCode里调 ...
-
vue.js - 1
最近开发公司vue前端项目,做一下笔记,偶尔上来查漏补缺 Vue指令之v-bind的三种用法 直接使用指令v-bind 使用简化指令: 在绑定的时候,拼接绑定内容::title="btnTi ...