JavaScript函数中的this四种绑定形式
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四种绑定形式的更多相关文章
- 【javascript】函数中的this的四种绑定形式
目录 this的默认绑定 this的隐式绑定 隐式绑定下,作为对象属性的函数,对于对象来说是独立的 在一串对象属性链中,this绑定的是最内层的对象 this的显式绑定:(call和bind方法) n ...
- 【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子,我要讲故事啦~~
javascript中的this和函数息息相关,所以今天,我就给大家详细地讲述一番:javascript函数中的this 一谈到this,很多让人晕晕乎乎的抽象概念就跑出来了,这里我就只说最 ...
- 函数中的this的四种绑定形式
目录 this的默认绑定 this的隐式绑定 隐式绑定下,作为对象属性的函数,对于对象来说是独立的 在一串对象属性链中,this绑定的是最内层的对象 this的显式绑定:(call和bind方法) n ...
- this的四种绑定形式
一 , this的默认绑定 当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定:绑定到全局的window对象. 一个例子 function fire ...
- JS中this的4种绑定规则
this ES6中的箭头函数采用的是词法作用域. 为什么要使用this:使API设计得更简洁且易于复用. this即不指向自身,也不指向函数的词法作用域. this的指向只取决于函数的调用方式 thi ...
- javascript中this的四种用法
javascript中this的四种用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-05-11我要评论 在javascript当中每一个function都是一个对象,所 ...
- JavaScript高级之函数的四种调用形式
主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...
- Python中函数传递参数有四种形式
Python中函数传递参数有四种形式 fun1(a,b,c) fun2(a=1,b=2,c=3) fun3(*args) fun4(**kargs) 四种中最常见是前两种,基本上一般点的教程都会涉及, ...
- this的四种绑定规则总结
一.默认绑定 1.全局环境中,this默认绑定到window 2.函数独立调用时,this默认绑定到window console.log(this === window);//true functio ...
随机推荐
- 操作系统 (OS)
1. 操作系统(Operation System,OS) 操作系统作为接口的示意图 没有安装操作系统的计算机,通常被称为 裸机 如果想在 裸机 上运行自己所编写的程序,就必须用机器语言书写程序 如果计 ...
- 学习使用Django一 安装虚拟环境
以上环境可以先在虚拟机上操作,熟练之后再正式机操作!!! 再学习Djangj之前,先讲个小概念,虚拟环境 记得刚刚开始学习Python的时候,往往是用的那个包,就Cmd 上 直接输入“pip ...
- C#的反射(一)
1.什么是元数据(MetaData)和反射(reflection) 一般情况下我们的程序都在处理数据的读.写.操作和展示.但是有些程序操作的数据不是数字.文本.图片,而是程序和程序类型本身的信息. ① ...
- Struts2 Action类的创建以及参数传递以及接收
一.Struts中Action得创建方式 1,直接创建一个简单的Action类 添加Struts.xml,配置转发方法返回转发的页面. 2,实现一个Action类 Strust.xml配置对应的Url ...
- YOLO---多个版本的简单认识
YOLO---多个版本的简单认识 YOLOv3 有好几个经典版本了:一.YOLOv3 (Darknet)官网 @ https://github.com/pjreddie/darknet二.YOLOv3 ...
- Python&Selenium 数据驱动【unittest+ddt+Excel】
一.摘要 一般情况下我们为了更好的管理测试数据会选择将测试数据存储在Excel文件当中去,本节内容将展示给读者将测试数据存储在Excel文档中的案例. 二.创建存储测试数据的Excel 创建一个Exc ...
- Spring-Spring配置-依赖注入
5.Spring配置 5.1.别名 <!--别名,如果添加了别名,我们也可以使用别名获取到这个对象--> <alias name="user" alias=&qu ...
- linux实操_shell读取控制台输入
基本语法: read [选项] [参数] 选项: -p 指定读取值时的提示符 -t 指定读取值时等待的时间(秒),如果没有在指定的时间内输入,就不再等待了 参数: 变量:指定读取值的变量名 实例1:读 ...
- idea 插件的使用
idea 插件的使用 进阶篇(个人收集使用中的) 恭喜你,如果你已经看到这篇文章,证明在idear使用上已经初有小成!那么就要向着大神进发了! 下边就是大神之路! 插件的设置 在 IntelliJ I ...
- 2019牛客多校E Androgynos——自补图&&构造
题目 给出一个 $n$,判断是否存在 $n$ 个顶点的自补图,如果存在,输出边和映射. 分析 一个无向图若同构于它的补图,则称该图为自补图. 定理:一个自补图一定存在 $4k$ 或 $4k+1$ 个顶 ...