web前端-JavaScript中的call、apply和bind方法(改变this指向)

简介: web前端-JavaScript中的call、apply和bind方法(改变this指向)

call()和apply()


  • 这两个方法都是函数对象的方法,需要通过函数对象来调用


1.当不传递参数时,call和apply和函数调用的效果并无区别,this永远指向window



2.在调用call()和apply()可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this



3.call()方法可以将实参在对象之后依次传递



4.apply()方法需要将实参封装到一个数组中统一传递



bind()()


为什么bind方法会有两个小括号?因为使用bind方法会返回一个新的方法,需要重新调用才行。除此之外,bind方法个call方法一致。


bind方法也是函数对象的方法,需要通过函数对象来调用。


1.当不传递参数时,this永远指向window



2.将一个对象作为第一个参数,this指向传入的对象。



3.bind方法可以将实参在对象之后依次传递



call、apply和bind方法的区别


相同点


  1. 都是函数对象的方法。


  1. 都可以改变this指向。


  1. 通过这三个方法调用函数时,传入一个对象作为第一个参数时,this指向这个对象,若不传入任何参数,this指向则与函数调用时的一样,指向window


不同点


  1. call和apply是直接执行函数调用,而bind会返回一个新的方法,需要再次调用。


  1. 在传入一个对象作为第一个参数时,call和bind方法在该对象后面传入以逗号分隔的参数列表,而apply传入的时一个数组对象。


this指向的四种情况总结


1.以函数形式调用时,this永远都是window


2.以方法的形式调用时,this是调用方法的对象


3.以构造函数的形式调用时,this是新创建的那个对象


4.使用call、apply和bind调用时,this是指定的那个对象

目录
相关文章
|
1天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
10 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
1天前
|
Web App开发 JavaScript 前端开发
前端基础(一)_初识JavaScript
本文介绍了JavaScript的起源、核心组成(ECMAScript、DOM、BOM),并解释了JavaScript的三种引入方式:行内引入、内部引入和外部引入,以及`window.onload`的使用,最后讨论了网页、网站、浏览器和兼容性的概念。
7 2
前端基础(一)_初识JavaScript
|
1天前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
8 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
1天前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
9 2
|
3天前
|
JavaScript 前端开发
this指向的几种情况以及js简单实现call、apply、bind___六卿
本文讨论了JavaScript中`this`的指向规则,并提供了`call`、`apply`和`bind`方法的简单实现,用于改变函数的`this`指向。
8 0
this指向的几种情况以及js简单实现call、apply、bind___六卿
|
8天前
|
JavaScript
js的this与call,apply,bind
js的this与call,apply,bind
|
8天前
|
编解码 前端开发 JavaScript
web端 本地调用摄像头、前端摄像头
web端 本地调用摄像头、前端摄像头
|
15天前
|
前端开发
|
15天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
15天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`<div>`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。