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 ...
随机推荐
- Linux下的库文件搜索路径
对于以压缩包发布的软件,在它的目录下通常都有一个配置脚本configure,它的作用确定编译参数(比如头文件位置.连接库位置等),然后生成Makefile以编译程序.可以进入该软件的目录,执行 ...
- Python内存数据序列化到硬盘上哪家强
1. 闲扯一下:文件 磁盘上的数据,我们一般称为 “文件” ,一般不同的文件都有各自的后缀名,比如 .txt .docx .xlsx .jpg .mp3 .avi .这些不同类型的文件一般分为两大类: ...
- 排序方法——python
1.冒泡排序法(Bubble Sort) 比较相邻的元素.如果第一个比第二个大,就交换它们两个: 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对,这样在最后的元素应该会是最大的数: 针对所 ...
- mongodb的基本操作之数据写入和查询
连接到mongodb服务器后,查看当前数据中有多少数据库 show dbs 切换数据库 use conf 删除数据库 db.dropDatabase() 再次使用 use conf 切换数 ...
- PHP获取文件大小的几种方法!
一.get_header($url,true): $url = 'http://www.xxx.com/MoJing_win_x86_64_V5.125.zip'; $res = get_header ...
- (二)AppScan使用教程
1.新建扫描:一般选择 常规扫描 2.选择扫描的平台:web或app 3.扫描配置向导 ①配置URL和服务器 ②配置登录管理 在扫描的过程中,可能会不小心碰到退出按钮导致Appscan注销.因此,要登 ...
- python_网络编程struct模块解决黏包问题
为什么会出现黏包现象: 首先只有在TCP协议中才会出现黏包现象,是因为TCP协议是面向流的协议,在发送的数据传输的过程中还有缓存机制来避免数据丢失,因此,在连续发送小数据的时候,以及接收大小不符的时候 ...
- Selenium+Java+Jenkins+TestNg
注意:各webdriver版本都有对应的浏览器版本 如果启动出现问题,可能是driver路径错误,需要使用System.setProperty("webdriver.firefox.bin& ...
- win10 UWP 等级控件Building a UWP Rating Control using XAML and the Composition API | XAML Brewer, by Diederik Krols
原文:Building a UWP Rating Control using XAML and the Composition API | XAML Brewer, by Diederik Krols ...
- List根据某字段去重,以及compareTo 浅解
原文链接:https://blog.csdn.net/qq_35788725/article/details/82259013 Collections.sort可对集合进行排序 根据List里面某个字 ...