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. springboot系列(三) 启动类中关键注解作用解析

    一.Springboot:请求入口 @SpringBootApplication @EnableAspectJAutoProxy @EnableScheduling @EnableTransactio ...

  2. xtrabackup数据库备份工具

    下来我来介绍一下更强大的备份工具:xtrabackup xtrabackup是Percona公司CTO Vadim参与开发的一款基于InnoDB的在线热备工具,具有开源,免费,支持在线热备,备份恢复速 ...

  3. linux-2.6.38 IIC驱动框架分析

    在linux-2.6内核中,IIC的驱动程序可以大概分为三部分: (1)IIC核心代码:/drivers/i2c/i2c-core.c IIC核心提供了IIC总线驱动和设备驱动的注册.注销方法和IIC ...

  4. Centos杀死进程kill方法大全

    杀死进程最安全的方法是单纯使用kill命令. 首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令: # kill -pid 注释:标准的kill命令通常都能达到目的.终止有问题的进程,并 ...

  5. Lua 学习之基础篇十<Lua 常见的语法规则>

    下面讲一些lua 常见的用法和规则,可以为学习理解lua带来帮助,最后附上的部分是lua的基本操作,基本包含所有常用语法语句. 1. if判断 lua把 nil 和false 视为"假&qu ...

  6. dpkg: error processing package XXX (--configure) 解决方法 (ubuntu右上角红色警告)

    在 Ubuntu 执行 sudo apt-get upgrade 时,出现了如下的报错: Setting up bluez (4.101-0ubuntu13.1) ... reload: Job is ...

  7. 14、生命周期-@PostConstruct&@PreDestroy

    14.生命周期-@PostConstruct&@PreDestroy @PostConstruct 在Bean创建完并且属性值赋值完执行 package javax.annotation; i ...

  8. Flutter 踩坑集

    1.Flutter Packages Get 一直重试或一直失败的问题 翻车原因:万恶之源-----天朝的长城防火墙 解决方法 详见:https://flutter.dev/community/chi ...

  9. loaction.reload(false)和location.reload(true)的区别

    loaction.reload(false)和location.reload(true)有差别啊,一个是先判断页面有没修改,有的话就从服务器下载页面,没有就直接从缓存里拿(这个会提升响应性能)而把该方 ...

  10. js字符串字母大小写转换

    toLocaleUpperCase 方法 返回一个字符串,其中所有的字母字符都被转换为大写,同时适应宿主环境的当前区域设置. stringVar.tolocaleUpperCase( )必选的 str ...