js图片加载状态 es5函数继承-构造函数的继承(2) es5函数继承-非构造函数的继承 jsError:UnexpectedtokeniinJSON js经常变脸的this js计算随机字符串 es5构造函数基础 js柯里化编程 js生成36位随机字符串 js跨域ajax请求获取传递的cookie js获取元素相对于屏幕的位置 js格式化获取到的日期对象xxxx-xx-xxxx:xx js函数式编程 js把url上的参数序列化为对象 js实时预览选择的图片文件 js中的深拷贝与浅拷贝 js函数的prototype属性 js获取浏览器滚动条高度scrollTop js类数组转数组 js改变select元素的值 js千分位加逗号的方法 es5函数继承-构造函数的继承(3) js表单提交的那些事儿 jscookie的作用域 js获取元素计算后的样式 js中的innerHTML方法 js获取DOM元素的方法 jsES5与ES6中的for循环 js向textarea输入tab字符 jsdisplay:none的input元素会默认添加到表单中提交吗 js解读-Function.prototype.apply.call() 认识javascript 在页面中插入JS代码 JS语句和代码块 JS的注释让浏览器显示不同的弹窗在页面中输出一些信息浏览器中的开发者工具 JS中的变量 JS中的原始数据类型 JS中的引用数据类型原始和引用数据类型的区别 JS中的算数运算符 JS中的赋值运算符 JS中的比较运算符 JS中的逻辑运算符 JS中的三元运算符运算符的优先级 JS中数据类型的转换 JS流程控制语句之if-else 数据类型的隐式转换 JS流程控制语句之switch JS流程控制语句之for循环在浏览器中调试JS代码 JS流程控制语句之for循环案例 JS流程控制语句之while循环 JS流程控制语句之do-while循环 JS中函数的声明与使用 JS中函数的参数 JS中函数的arguments JS中函数的返回值 JS中的纯函数 JS中的作用域 JS语句的执行顺序 JS语句的执行顺序2 神奇的this 神奇的this(补充) 改变函数的this 构造函数函数的继承函数的prototype属性对象的创建和使用处理代码错误和Error对象数组的声明和使用数组的length属性新增或删除数组中的元素合并多个数组内容 for循环遍历数组 map方法遍历数组 forEach方法遍历数组 every和some遍历数组 includes方法查找元素 indexOf和lastIndexOf方法查找元素 find和findIndex方法查找元素 filter方法筛选元素 sort方法对数组排序 reverse方法翻转数组元素顺序 reduce和reduceRight统计元素 slice提取数组元素数组方法总结字符串的声明和使用字符串的长度length 在字符串中提取字符在字符串中查找字符转换字符串大小写去除字符串前后的空格拼接和分割字符串替换字符串 Number对象及其运用 Math对象及其运用 Date对象及其运用全局函数编码和解码字符串把字符串转为数字判断目标是否是数字正则表达式任意一个字符的集合表示数量的符号元数据符号正则中的或表示边界的符号记住匹配项和非捕获匹配正向和反向查找正向肯定和否定查找贪婪和非贪婪模式 webAPI中的BOM和DOM window对象打开或关闭新窗口设置当前窗口的名称获取当前窗口的打开状态获取浏览器的位置和尺寸操作窗口滚动条设置和取消定时器 navigator对象 location对象 History对象 Document对象 DOM节点创建修改或删除节点检查节点获取元素节点获取元素节点两种方式的区别往元素中插入内容修改元素内容获取元素节点的尺寸和位置信息获取或修改元素标签上的属性获取和修改元素class属性关于元素标签属性的一些方法获取元素的CSS样式设置元素的CSS样式 js操作元素样式实现css过渡的案例操作class实现css过渡的案例连续操作元素样式的案例星星案例事件给对象添加监听事件和侦听函数单个元素添加多个监听事件单个事件添加多个侦听函数事件流设置一次性的侦听函数案例-插入多个li元素移除侦听函数案例-取消侦听函数案例-改变图片元素路径案例-切换多张图片显示状态事件对象获取触发事件的对象和监听对象委托事件判断事件是否会向上冒泡鼠标进入和离开元素事件阻止事件向上冒泡阻止后添加的侦听函数执行阻止事件的默认行为案例-图片轮播案例-图片自动轮播案例-图片导航案例-点击导航后取消自动轮播模拟触发事件快速模拟触发事件判断事件是否被人为触发自定义事件点击事件的特有属性元素滚动事件判断元素的滚动方向表单提交事件和重置事件焦点事件输入框内容改变事件下拉框选项改变事件单选框状态改变事件多选框状态改变事件表单控件值发生改变事件判断页面滚动方向带滚动效果的轮播图带滚动效果的轮播图2 带滚动效果的轮播图3 判断元素是否在可视区域内数字递增效果 JS的逻辑运算符&&和||中发生了什么 JS语法整理补充

js解读-Function.prototype.apply.call()

[ JS基础 ]

今天又有人问我Function.prototype.apply.call()是啥意思了，干脆在这里总结一下

首先回忆一下 apply 和 call 的用法:

apply和call都用于改变函数的执行上下文,并且传递参数(两者传递参数的方式不同, call以序列化参数传参，apply以数组形式传参)

let egg = { name: 'pear' };
function add(color) {
    return this.name + "'s color is " + color;
}
add.call(egg, 'yellow'); // "paer's color is yellow"˝
add.apply(egg, ['yellow']); // "paer's color is yellow"

相当于

function add(color) {
    return this.name + "'s color is " + color;
}
let egg = {
    name: 'pear',
    add,
};
egg.add('yellow'); // "paer's color is yellow"

现在来把Function.prototype.apply.call(target, context, [...argList])拆分一下:

Function.prototype.apply当做一个函数fn,

那就是fn.call(target, context, [...argList])

相当于target.fn(context, [...argList])

通常情况下，我们的target都是一个对象，用来设置call方法的执行上下文

但是如果我们把target设置成一个函数呢？函数时可以执行apply方法的。

现在再把 fn 展开target.apply(context, [...argList])，你会发现是不是又回到了apply的用法。

其中：

target是一个函数，

context是target函数的执行上下文，

[...argList]是通过apply执行函数的传参内容。

到此Function.prototype.apply.call(target, context, [...argList])就解读完毕了

扩展

实际上不是非要使用这种格式Function.prototype.apply.call(target, context, [...argList])。

我们也可以使用

Function.prototype.apply.apply(target, [context, [...argList]])

Function.prototype.call.call(target, context, ...argList)

Function.prototype.call.apply(target, [context, ...argList]])

function add(color) {
    return this.name + "'s color is " + color;
}
let egg = {
    name: 'pear',
};

Function.prototype.apply.apply(add, [egg, ['red']]); // "pear's color is red"
Function.prototype.apply.apply(add, [egg, ['yellow']]); // "pear's color is red"
Function.prototype.call.apply(add, [egg, ['yellow']]); // "pear's color is red"
Function.prototype.call.call(add, egg, 'yellow'); // "pear's color is red"

可以发现这四种写法的结果都是一样的，具体的分解原理和上面是一样的，就不再细说了。