Blog

Blog copied to clipboard

JavaScript 深入系列之 call 和 apply 方法的模拟实现

4

本系列的主题是 JavaScript 深入系列，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，[点我跳转到文末](#end)。 如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。 # call 和 apply 方法的模拟实现 > 不了解call、apply和bind方法的可以参考前面写的这篇文章：[call、apply和bind方法的用法、区别和使用场景](https://github.com/yuanyuanbyte/Blog/issues/115) # 实现call 举一个使用call方法的例子： ```javascript var foo = { value: 1 }; function bar() { console.log(this.value); } bar.call(foo); //...

yuanyuanbyte

本系列的主题是 JavaScript 基础，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，[点我跳转到文末](#end)。 如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。 # apply 和 call 在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。 JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。 先来一个栗子： ```javascript function fruits() {} fruits.prototype = { color: "red", say:...

yuanyuanbyte

本系列的主题是 JavaScript 深入系列，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，[点我跳转到文末](#end)。 如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。 # 前言 JavaScript 是动态的，本身不提供一个 class 的实现。即便是在 ES2015/ES6 中引入了 class 关键字，但那也只是语法糖，JavaScript 仍然是基于原型的。 当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（object）都有一个私有属性（称之为 `__proto__`）指向它的构造函数的原型对象（**prototype**）。该原型对象也有一个自己的原型对象（`__proto__`），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个**原型链**中的最后一个环节。 几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。 # 谈谈你对原型的理解？ 在 JavaScript...

yuanyuanbyte

本系列的主题是 JavaScript 深入系列，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，[点我跳转到文末](#end)。 如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。 # 简洁全面的手写AJAX，以及用Promise封装AJAX请求 ## 前言 原生js实现Ajax，本文用最简洁的脉路，帮你梳理前端经典面试“手写ajax”，然后再告诉你廖雪峰是如何使用Promise封装ajax！！！ ## 手写AJAX ```js var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState !== 4) return; if (xhr.status...

yuanyuanbyte

本系列的主题是 JavaScript 深入系列，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，[点我跳转到文末](#end)。 如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。 # 一文搞定 JavaScript 的数据类型检测 ## 1. typeof **对于原始数据类型，我们可以使用 typeof 操作符来判断他的数据类型：** ```js console.log(typeof ""); console.log(typeof 1); console.log(typeof true); console.log(typeof null); console.log(typeof undefined); console.log(typeof []); console.log(typeof function(){});...

yuanyuanbyte

本系列的主题是 Vue，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，[点我跳转到文末](#end)。 如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。 # Vue 组件通信有哪几种方式 Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。 Vue 组件通信主要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。 ## `props` 和 `$emit` 父子组件通信 父组件向子组件传递数据是通过 `props` 传递的 子组件传递数据给父组件是通过 `$emit` 触发事件来做到的 `props` 示例 (`使用了 v-bind...

yuanyuanbyte

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，[点我跳转到文末](#end)。 如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。 # 缓存 **缓存我们会从两个点出发：一个是对babel进行缓存，另一个是对整体的文件资源进行缓存** # babel缓存 **日常开发中，我们永远是js代码最多，像结构和样式要么少要么很少，即使多也没有办法做更多的处理。** **为什么要对babel进行缓存呢？因为babel要对我们写的js代码做编译处理，编译成一种浏览器能识别的语法，即所谓的js兼容性处理。在编译过程中，假设有100个js模块，只改动其中1个js模块，不可能把全部的模块都重新编译一遍，其他99个应该是不变的，这一点跟前面文章讲过的HMR功能一样：一个模块变，只变这一个模块，其他模块不变。而生产环境下又不能使用HMR功能，因为HMR是基于devServer，生产环境是不需要devServer的。** **开启babel缓存只需要在`babel-loader`的配置里加一个参数即可：`cacheDirectory: true`** ```javascript { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { useBuiltIns: 'usage',...

yuanyuanbyte

本系列的主题是 JavaScript 基础，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，[点我跳转到文末](#end)。 如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。 # 为什么说函数的 arguments 参数是类数组，如何遍历类数组 `arguments` 是一个对应于传递给函数的参数的类数组对象。 **类数组对象**：对于一个普通的对象来说，如果它的所有 property 名均为正整数，同时也有相应的 length 属性，那么虽然该对象并不是由 Array 构造函数所创建的，它依然呈现出数组的行为，在这种情况下，这些对象被称为“类数组对象”。 `arguments` 类似于 Array，但除了 length 属性和索引元素之外没有任何 Array 属性。 `arguments`对象是所有（非箭头）函数中都可用的局部变量。你可以使用`arguments`对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。例如，如果一个函数传递了三个参数，你可以以如下方式引用他们： ```javascript arguments[0] arguments[1] arguments[2]...

yuanyuanbyte

本系列的主题是 JavaScript 基础，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，[点我跳转到文末](#end)。 如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。 # 为什么0.1+0.2 ! == 0.3，如何处理 ```javascript let n1 = 0.1, n2 = 0.2 console.log(n1 + n2) // 0.30000000000000004 ``` 这里得到的不是想要的结果，要想等于0.3，就要把它进行转化： ```javascript (n1 + n2).toFixed(2) //...

yuanyuanbyte

本系列的主题是 JavaScript 基础，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，[点我跳转到文末](#end)。 如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。 # JS 数组有哪些原生方法，那么多 API 真的很难记住吗？ ## 前言 通过梳理数组 API 的方式，归纳整理，你会发现 js 数组的方法并没有很难记住，一起来学习吧~ 提醒一下大家，不要看到目录里那么多的数组方法就望而却步，一定要先看完`数组原生方法梳理`，了解数组到底有哪些方法，然后再逐个学习，这样你就会突然发现，其实数组也没多少方法嘛 ~ 都是能用到的 ## 数组原生方法梳理 **数组 判断方法**：`Array.isArray()` **数组 合并的方法**：`concat()`，返回的是拼接好的数组，不影响原数组。 **数组和字符串的转换方法：**`toString()`、`join()`， 其中 `join()` 方法可以指定转换为字符串时的分隔符。...

yuanyuanbyte