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. 操作系统 (OS)

    1. 操作系统(Operation System,OS) 操作系统作为接口的示意图 没有安装操作系统的计算机,通常被称为 裸机 如果想在 裸机 上运行自己所编写的程序,就必须用机器语言书写程序 如果计 ...

  2. 学习使用Django一 安装虚拟环境

    以上环境可以先在虚拟机上操作,熟练之后再正式机操作!!! 再学习Djangj之前,先讲个小概念,虚拟环境     记得刚刚开始学习Python的时候,往往是用的那个包,就Cmd 上 直接输入“pip ...

  3. C#的反射(一)

    1.什么是元数据(MetaData)和反射(reflection) 一般情况下我们的程序都在处理数据的读.写.操作和展示.但是有些程序操作的数据不是数字.文本.图片,而是程序和程序类型本身的信息. ① ...

  4. Struts2 Action类的创建以及参数传递以及接收

    一.Struts中Action得创建方式 1,直接创建一个简单的Action类 添加Struts.xml,配置转发方法返回转发的页面. 2,实现一个Action类 Strust.xml配置对应的Url ...

  5. YOLO---多个版本的简单认识

    YOLO---多个版本的简单认识 YOLOv3 有好几个经典版本了:一.YOLOv3 (Darknet)官网 @ https://github.com/pjreddie/darknet二.YOLOv3 ...

  6. Python&Selenium 数据驱动【unittest+ddt+Excel】

    一.摘要 一般情况下我们为了更好的管理测试数据会选择将测试数据存储在Excel文件当中去,本节内容将展示给读者将测试数据存储在Excel文档中的案例. 二.创建存储测试数据的Excel 创建一个Exc ...

  7. Spring-Spring配置-依赖注入

    5.Spring配置 5.1.别名 <!--别名,如果添加了别名,我们也可以使用别名获取到这个对象--> <alias name="user" alias=&qu ...

  8. linux实操_shell读取控制台输入

    基本语法: read [选项] [参数] 选项: -p 指定读取值时的提示符 -t 指定读取值时等待的时间(秒),如果没有在指定的时间内输入,就不再等待了 参数: 变量:指定读取值的变量名 实例1:读 ...

  9. idea 插件的使用

    idea 插件的使用 进阶篇(个人收集使用中的) 恭喜你,如果你已经看到这篇文章,证明在idear使用上已经初有小成!那么就要向着大神进发了! 下边就是大神之路! 插件的设置 在 IntelliJ I ...

  10. 2019牛客多校E Androgynos——自补图&&构造

    题目 给出一个 $n$,判断是否存在 $n$ 个顶点的自补图,如果存在,输出边和映射. 分析 一个无向图若同构于它的补图,则称该图为自补图. 定理:一个自补图一定存在 $4k$ 或 $4k+1$ 个顶 ...