this的四种绑定形式

时间:2021-07-11 06:21:50

一 , 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,他们的区别是这样的:

  1. 他们的作用一模一样,区别在于传入参数形式不同.
  2. apply接受两个参数,第一个指定this对象的指向,第二个参数为一个带下标的集合,这个集合可以为数组,也可以为类数组,apply把这个集合中的元素作为参数传递给被调用的函数.
var func = function( a, b, c ){
alert([a,b,c]); //输出[1,2,3]
};
func.apply( null, [ 1, 2, 3 ] );
  1. call传入的参数不固定,与apply相同的是,第一个参数也是代表函数体内的this指向,从第二个参数开始往后,每个参数被依次传入函数.
var func = function( a, b, c ){
alert([a,b,c]); //输出[1,2,3]
};
func.call( null, 1, 2, 3 );
  1. 当使用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的四种绑定形式的更多相关文章

  1. 【javascript】函数中的this的四种绑定形式

    目录 this的默认绑定 this的隐式绑定 隐式绑定下,作为对象属性的函数,对于对象来说是独立的 在一串对象属性链中,this绑定的是最内层的对象 this的显式绑定:(call和bind方法) n ...

  2. 【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子,我要讲故事啦~~

       javascript中的this和函数息息相关,所以今天,我就给大家详细地讲述一番:javascript函数中的this   一谈到this,很多让人晕晕乎乎的抽象概念就跑出来了,这里我就只说最 ...

  3. 函数中的this的四种绑定形式

    目录 this的默认绑定 this的隐式绑定 隐式绑定下,作为对象属性的函数,对于对象来说是独立的 在一串对象属性链中,this绑定的是最内层的对象 this的显式绑定:(call和bind方法) n ...

  4. JavaScript函数中的this四种绑定形式

    this的默认绑定.隐式绑定.显示绑定.new绑定 <script> //全局变量obj_value ; //1.window调用 console.log(`*************** ...

  5. javascript——四种函数调用形式

    此文的目的是分析函数的四种调用形式,弄清楚函数中this的意义,明确构造函对象的过程,学会使用上下文调用函数. 在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而 ...

  6. JavaScript高级之函数的四种调用形式

    主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...

  7. Tensorflow 损失函数及学习率的四种改变形式

    Reference: https://blog.csdn.net/marsjhao/article/details/72630147 分类问题损失函数-交叉熵(crossentropy) 交叉熵描述的 ...

  8. this的四种绑定规则总结

    一.默认绑定 1.全局环境中,this默认绑定到window 2.函数独立调用时,this默认绑定到window console.log(this === window);//true functio ...

  9. Android颜色值&lpar;RGB&rpar;所支持的四种常见形式

    Android中颜色值是通过红(Red).绿(Green).蓝(Blue)三原色,以及一个透明度(Alpha)值来表示的,颜色值总是以井号(#)开头,接下来就是Alpha-Red-Green-Blue ...

随机推荐

  1. android控件 ToggleButton的应用

    ToggleButton是android给我们提供的开关按钮, 有两种状态:选中和未选择状态. 以下是代码实例: main.xml [html] view plain copy <?xml ve ...

  2. Correlation Filter in Visual Tracking

    涉及两篇论文:Visual Object Tracking using Adaptive Correlation Filters 和Fast Visual Tracking via Dense Spa ...

  3. PHP常用文件函数和目录函数整理

    一.常用文件函数库 1.basename(); -- 返回路径中的文件名部分. string basename ( string $path [, string $suffix ] ) //给出一个包 ...

  4. &lbrack;luogu P3128&rsqb;&lbrack;USACO15DEC&rsqb;Max Flow &lbrack;LCA&rsqb;&lbrack;树上差分&rsqb;

    题目描述 Farmer John has installed a new system of  pipes to transport milk between the  stalls in his b ...

  5. idea 右键无java class选项

    项目中新建module之后,要在该目录下新增java Class文件,右键——>New发现无Java Class选项. File –Project Structure或者ctrl+alt+shi ...

  6. mysql&lowbar;day02

    MySQL-Day01回顾1.MySQL的特点 1.关系型数据库 2.跨平台 3.支持多种编程语言2.MySQL的启动和连接 1.服务端启动 sudo /etc/init.d/mysql start| ...

  7. 札记:Property动画

    简介 Android 3.0 (API level 11)引入了属性动画系统,它是一个完善的框架,可以用来对几乎任何对象进行动画.只需要指定要动画的对象属性,动画时长,属性值区间等,无论对像是否在屏幕 ...

  8. &lbrack;原创&rsqb;DevOps 的技术栈和工具

    [原创]DevOps 的技术栈和工具 版本控制:GitHub.GitLab.SubVersion 自动化构建和测试:Maven .Selenium.JMeter.Gradle 持续集成&交付: ...

  9. mac下编译cpu only caffe并用xCode建caffe工程

    mac编译caffe 好像又变容易了,直接git clone下载blvc源码,make.config里去掉了CPU_ONLY前面的注释,并没有安装任何依赖,也可能是自己mac上本来有, xCode里调 ...

  10. vue&period;js - 1

    最近开发公司vue前端项目,做一下笔记,偶尔上来查漏补缺 Vue指令之v-bind的三种用法 直接使用指令v-bind 使用简化指令: 在绑定的时候,拼接绑定内容::title="btnTi ...