this的默认绑定、隐式绑定、显示绑定、new绑定

<script>
//全局变量obj_value
var obj_value=; //1、window调用
console.log(`******************************************************`)
function fn(){
console.log("obj_value",this.obj_value);
}
fn(); //输出obj_value=1 //2、obj对象显式调用
console.log(`******************************************************`)
var obj={
obj_value:,
fire:function(){
console.log("obj_value",this.obj_value);
}
}
obj.fire(); //obj对象没有丢失绑定,输出obj_value=2 //3、obj对象隐式调用
console.log(`******************************************************`)
function fn_fire(){
console.log("obj_value",this.obj_value);
}
var obj={
obj_value:,
fire:fn_fire //隐式调用外部的function
}
obj.fire(); //虽然隐式调用,但是obj对象没有丢失绑定,输出obj_value=2 //4、间接隐式/显示调用obj对象的方法、
console.log(`******************************************************`)
function fn_fire(){
console.log("obj_value",this.obj_value);
}
var obj={
obj_value:,
fire:fn_fire //隐式调用外部的function
}
obj.fire(); //虽然隐式调用,但是obj对象没有丢失绑定,输出obj_value=2
var other_fire=obj.fire;
other_fire();//间接调用obj的方法,导致obj对象丢失,重新获取window对象,obj_value=1 //5、obj对象丢失,使用call、apply、bind重新绑定obj对象,
//call/apply跟bind的区别是,
// call/apply会直接执行函数,bind不执行函数,只返回一个可供执行的函数
console.log(`******************************************************`)
function fn_fire(){
console.log("obj_value",this.obj_value);
}
var obj={
obj_value:,
fire:fn_fire //隐式调用外部的function
}
var other_fire=obj.fire;
other_fire();//间接调用obj的方法,导致obj对象丢失,重新获取window对象,obj_value=1
other_fire.call(obj);//虽然间接绑定,但是使用call绑定了obj对象,obj_value=2
other_fire.apply(obj);//apply跟call作用一样,obj_value=2
var bind_fire=other_fire.bind(obj);//使用bind绑定obj对象,返回一个function
bind_fire();//obj_value=2 //6、new绑定,this都是指定当前对象
console.log(`******************************************************`)
var obj={
fire:function(param1){
this.obj_value=param1;
}
}
var new_obj=new obj.fire(); //新建obj.fire()对象,this将是其fire()本身
console.log("obj_value",new_obj.obj_value)//输出obj_value=3
console.log("obj_value",this.obj_value)//输出obj_value=1
</script>

输出

JavaScript函数中的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. this的四种绑定形式

    一 , this的默认绑定 当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定:绑定到全局的window对象. 一个例子 function fire ...

  5. JS中this的4种绑定规则

    this ES6中的箭头函数采用的是词法作用域. 为什么要使用this:使API设计得更简洁且易于复用. this即不指向自身,也不指向函数的词法作用域. this的指向只取决于函数的调用方式 thi ...

  6. javascript中this的四种用法

    javascript中this的四种用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-05-11我要评论 在javascript当中每一个function都是一个对象,所 ...

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

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

  8. Python中函数传递参数有四种形式

    Python中函数传递参数有四种形式 fun1(a,b,c) fun2(a=1,b=2,c=3) fun3(*args) fun4(**kargs) 四种中最常见是前两种,基本上一般点的教程都会涉及, ...

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

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

随机推荐

  1. C和指针--命令行参数

    1.命令行参数 C程序的main函数具有两个形参,第1个通常称为argc,它表示命令行参数的数目.第2个称为argv,它指向一组参数值.由于参数的数目并没有内在的限制,所以argv指向这组参数值(本质 ...

  2. Linux网络管路——网络相关命令ping、traceroute

    ping [root@51cto /]# ping www.baidu.com PING www.a.shifen.com (() bytes of data. bytes from ttl= tim ...

  3. Java常用数学类和BigDecimal

    笔记: Math类 * java.lang.Math提供了一系列静态方法用于科学计算:其方法的参数和返回值类型一般为double型. * abs 绝对值 * acos,asin,atan,cos,si ...

  4. 剑指Offer的学习笔记(C#篇)-- 左旋转字符串

    题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=”abc ...

  5. investigate issues of real time interrupted

    Issues: customer report that real time will interrupted frequently as below: Root Cause: some storm ...

  6. 2019HDU多校第四场 K-th Closest Distance ——主席树&&二分

    题意 给定 $n$ 个数,接下来有 $q$ 次询问,每个询问的 $l, r, p, k$ 要异或上一次的答案,才是真正的值(也就是强制在线).每次询问,输出 $[l, r]$ 内第 $k$ 小的 $| ...

  7. Python3发送webservice请求

    Python3使用suds-jurko库来发送webservice接口请求 导入请求webservice接口需要用到的包 pip install suds-jurko 第一步:导入所需要的包 from ...

  8. vue中修改第三方组件的样式不生效

    问题 在使用element-ui时,有时候想要修改组件内的样式,但不成功,例如 <div class="test"> <el-button>按钮</e ...

  9. 把Cstring类型的字符串转化为char* 字符串;

    int char_leng; Cstring str="abcd"; char_leng=str.GetLength();//获取字符串长度 char *str_temp=(cha ...

  10. windows平台下MySQl的安装、破解和使用

    #1.下载:MySQL Community Server 5.7.16 http://dev.mysql.com/downloads/mysql/ #2.解压 如果想要让MySQL安装在指定目录,那么 ...