白衣莹墨

白衣莹墨 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

白衣莹墨 赞了文章 · 2020-11-21

🌟 Chrome DevTools 七大新功能

背景

Chrome 团队今年发布了不少新的功能,帮助开发者提升网页开发体验。

在最近的 Google 开发者大会上,介绍了最新的七大功能,它们分别是:

  1. 支援css-in-js的框架的样式编辑
  2. 模拟时区功能
  3. Lighthouse 量化使用者体验
  4. Issues 面板
  5. 媒体面板
  6. 一件修复文字的色彩对比
  7. 及时模拟色觉障碍

我在周末整理了一下这些内容, 非常详细。

下面我们就一起来个看看每个功能的细节吧。

正文

1. 支援css-in-js的框架的样式编辑

看到这个功能的时候, 你可能会好奇, Chrome Devtool 不是早就可以编辑css了吗?

没错,但是原本支持的是「 普通的css 」, 不是 「css-in-js」.

image.png

现在,“样式”窗格对编辑使用CSS对象模型(CSSOM)API创建的样式提供了更好的支持 。

许多 CSS-in-JS框架和库都在底层使用CSSOM API来构造样式。

image.png

例如,(CSSOM API)h1添加的样式CSSStyleSheet以前不可编辑。

image.png

因为它是css-in-js的代码。

但是现在可以在“样式”窗格中进行编辑了:

image.png

动态演示:

css-in-js.gif

2. 模拟时区功能

Chrome Devtool 能帮你模拟时区, 有了这个功能, 你就能很方便的测试国际化相关的一些功能。

比如:

在马来西亚的时间显示为:

image.png

如果想看在伦敦的时间, 就可以修改控制台的设置为伦敦:

image.png

显示的时间就改为伦敦时间了:

image.png

很方便吧~

开启这个面板的方法为:

image.png

选择location 就可以了:

image.png

3. Lighthouse 量化使用者体验

Lighthouse 推出了新的体验量化方式:Core Web Vitals.

image.png

你可以打开lightHouse 面板, 生成报告来查看:

image.png

示例:

image.png

想要了解更多关于 Core Web Vitals的信息, 可以关注:

web.dev/vitals

4. Issues 面板

大家是否对开发面板中的警告信息感到厌烦呢? 比如:

image.png

新的 Issues 标签 的主要目的是:整合浏览器, javascript 库, 框架的各种警告与异常信息, 给大家一些修复建议。

打开devtool, 刷新网页,如果有警告信息的话, 会只显示一条View issues 链接, 如图:

image.png

点击这个链接, 才会看到全部的 issues 列表, 也可以点击具体的某个 issue 查看具体的信息:

有了这个功能, 整个面板就更清爽了。

5. 媒体面板

新的媒体面板提供了一站式的资源与信息, 让你能更快的调试媒体问题。

浏览一个有视频流的网站, 打开媒体面版,

可以看到不同的分类,每一个类别下包含了具体详细的媒体信息。

你甚至可以下载视频,更方便的去排查问题:

6. 一件修复文字的色彩对比

devtool 会根据你的背景与字体颜色,自动提供文字的色彩对比建议, 比如:

我们看到, devtool 提供了 AA 与 AAA 两个色彩建议, 任意点击其中一个, 就是修复后的颜色:

是不是很棒~

7. 及时模拟色觉障碍

你可以利用 devtool 来模拟视觉障碍。

地球上大约有3亿人有不同程度的色觉障碍

身为网页开发者的我们, 如有能有工具辅助我我们在开发时找出色觉障碍的问题, 这不是很好吗?

先给大家介绍一下视觉障碍与色觉障碍。

视觉障碍的不同类型:

模糊视线

全色盲

红色盲

有了视觉模拟的功能, 就可以更方面的我们去设置无障碍资源, 有效的检测网页的色彩对比度:

这个功能,能帮你更好的完善网页的无障碍资源, 改善用户体验。

What's More

除了以上这些, 还有更多的新功能等待你去探索:

戳我查看更多新功能 ->

篇幅关系,就不一一介绍。

福利大放送

提供一个 google 研发的博客, 不定时发布开发心得与分享, 不容错过~~

Google Dev Blog

总结

内容大概就这么多, 希望对大家有所帮助~


如果你觉得这篇内容对你挺有启发,可以:

  1. 点个「在看」,让更多的人也能看到这篇内容。
  2. 关注公众号「前端e进阶」,掌握前端面试重难点,公众号后台回复「加群」和小伙伴们畅聊技术。

图片

查看原文

赞 17 收藏 4 评论 1

白衣莹墨 赞了回答 · 2020-11-21

解决Java jdbc 无法加载 mysql 驱动

首先你是用的是gradle管理依赖以及编译,所以你需要在gradle的配置文件中配置连接数据库的依赖。怎么配置,需要网上查下,如果没有网络,查询本地gradle添加依赖包。

关注 2 回答 1

白衣莹墨 提出了问题 · 2020-11-21

解决Java jdbc 无法加载 mysql 驱动

初学 java 连接数据库,正常创建工程并添加 jar,却报错!!!求教!!!

环境:
IDEA: 2020.2
Mysql:8.0.22
系统 macOS BigSur

先贴上目录结构
目录结构

源代码

package com.inmo.main;
public class Main {
    public static void main(String[] args) {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
}

这里报错了,异常就是找不到这个类

BUILD SUCCESSFUL in 250ms
2 actionable tasks: 2 executed
java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver
    at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581)
    at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
    at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)
    at java.base/java.lang.Class.forName0(Native Method)
    at java.base/java.lang.Class.forName(Class.java:315)
    at com.inmo.main.Main.main(Main.java:7)
14:56:23: Task execution finished 'Main.main()'.

但我已在 IDEA 中添加这个包
添加的依赖

求教哇!!!

关注 2 回答 1

白衣莹墨 提出了问题 · 2020-09-23

解决vue 使用 ts 给 $route.queryd 的属性添加类型

刚接触 TS 不久想用 vue+ts 加深理解

请求接口:

function getGoods(index: number) {}

我想限制传入的 index 的类型。

在调用的时候

const route = useRoute()
const index = parseInt(route.query.index)
getGoods(index)

发现 parseInt() 是报错的, 类型不符合

我要怎么给 query 里面的 index 添加类型注解呢?

关注 2 回答 2

白衣莹墨 赞了回答 · 2020-09-11

解决请教!后台管理系统如何安全登录

不使用 HTTPS 的情况下任何加密手段都是无效的。

不然为啥还要折腾 HTTPS?直接 HTTP 然后采用你所谓的加密手段不就好了?省下一笔证书钱和运维成本、还减少了非对称加解密导致的性能开销,岂不是美滋滋?

如果仅仅是防止中间人篡改数据,那么接口验签+非对称加密数据是一种选择。但这阻止不了使用者自身设备的抓包工具(可能是主动开启的,也可能是因为中木马了之类的被动开启)进行抓包。

题主可以自己思考一下,为什么会这样?


不过最基本的密码传输应该只传输哈希值,后端数据库里压根也不应该存储密码原始值,这点跟采用 HTTP 还是 HTTPS 没有关系。

举个例子,假设密码原文是 123456,那么前后端应该约定好一个哈希算法,比如 SHA256,那么前端在登录时传输的密码值应该是 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92。后端在接受到这个值后,只需比对和数据库里存储的哈希值是否一致就可以了。至于密码原始值是什么,后端自己都不知道,这才是最安全的,连即使被拖库了都不会泄露密码。

P.S. 后端存储和比对时最好再加盐一次,但这跟前端传输的数据就无关了。

P.S. 注意,是哈希值,不是加密值。因为有加密必有解密,但哈希是不可逆的。

关注 1 回答 1

白衣莹墨 提出了问题 · 2020-09-11

解决请教!后台管理系统如何安全登录

据我所知,后台管理系统都是不提供注册功能的,那么可以推断出账号跟密码都是事先注册好的(存数据库)

假设现在有一个后台管理系统(个人网站),我(管理员)知道账号跟密码,现在登录的话,要如何对数据进行加密传输或者说用啥登录机制呢?服务器(Node.js )要如何处理呢?

因为不使用 https,如果不进加密的话,就等于明文传输,抓包工具一抓一看就可以知道登录的账号跟密码

后端小白,希望走过路过的大佬不吝赐教!!!

关注 1 回答 1

白衣莹墨 收藏了文章 · 2020-08-08

面试官问:能否模拟实现JS的bind方法

前言

这是面试官问系列的第二篇,旨在帮助读者提升JS基础知识,包含new、call、apply、this、继承相关知识。
面试官问系列文章如下:感兴趣的读者可以点击阅读。
1.面试官问:能否模拟实现JS的new操作符
2.面试官问:能否模拟实现JS的bind方法
3.面试官问:能否模拟实现JS的call和apply方法
4.面试官问:JS的this指向
5.面试官问:JS的继承

用过React的同学都知道,经常会使用bind来绑定this

import React, { Component } from 'react';
class TodoItem extends Component{
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        console.log('handleClick');
    }
    render(){
        return  (
            <div onClick={this.handleClick}>点击</div>
        );
    };
}
export default TodoItem;

那么面试官可能会问是否想过bind到底做了什么,怎么模拟实现呢。

附上之前写文章写过的一段话:已经有很多模拟实现bind的文章,为什么自己还要写一遍呢。学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。只有自己去登山,才能看到不一样的风景,体会才更加深刻。

先看一下bind是什么。从上面的React代码中,可以看出bind执行后是函数,并且每个函数都可以执行调用它。
眼见为实,耳听为虚。读者可以在控制台一步步点开例子1中的obj:

var obj = {};
console.log(obj);
console.log(typeof Function.prototype.bind); // function
console.log(typeof Function.prototype.bind());  // function
console.log(Function.prototype.bind.name);  // bind
console.log(Function.prototype.bind().name);  // bound

codeFunction.prototype.bind/code

因此可以得出结论1:

1、bindFunctoin原型链中Function.prototype的一个属性,每个函数都可以调用它。<br/>
2、bind本身是一个函数名为bind的函数,返回值也是函数,函数名是bound 。(打出来就是bound加上一个空格)。
知道了bind是函数,就可以传参,而且返回值'bound '也是函数,也可以传参,就很容易写出例子2

后文统一 bound 指原函数originalbind之后返回的函数,便于说明。

var obj = {
    name: '轩辕Rowboat',
};
function original(a, b){
    console.log(this.name);
    console.log([a, b]);
    return false;
}
var bound = original.bind(obj, 1);
var boundResult = bound(2); // '轩辕Rowboat', [1, 2]
console.log(boundResult); // false
console.log(original.bind.name); // 'bind'
console.log(original.bind.length); // 1
console.log(original.bind().length); // 2 返回original函数的形参个数
console.log(bound.name); // 'bound original'
console.log((function(){}).bind().name); // 'bound '
console.log((function(){}).bind().length); // 0

由此可以得出结论2:

1、调用bind的函数中的this指向bind()函数的第一个参数。

2、传给bind()的其他参数接收处理了,bind()之后返回的函数的参数也接收处理了,也就是说合并处理了。

3、并且bind()后的namebound + 空格 + 调用bind的函数名。如果是匿名函数则是bound + 空格

4、bind后的返回值函数,执行后返回值是原函数(original)的返回值。

5、bind函数形参(即函数的length)是1bind后返回的bound函数形参不定,根据绑定的函数原函数(original)形参个数确定。

根据结论2:我们就可以简单模拟实现一个简版bindFn

// 第一版 修改this指向,合并参数
Function.prototype.bindFn = function bind(thisArg){
    if(typeof this !== 'function'){
        throw new TypeError(this + 'must be a function');
    }
    // 存储函数本身
    var self = this;
    // 去除thisArg的其他参数 转成数组
    var args = [].slice.call(arguments, 1);
    var bound = function(){
        // bind返回的函数 的参数转成数组
        var boundArgs = [].slice.call(arguments);
        // apply修改this指向,把两个函数的参数合并传给self函数,并执行self函数,返回执行结果
        return self.apply(thisArg, args.concat(boundArgs));
    }
    return bound;
}
// 测试
var obj = {
    name: '轩辕Rowboat',
};
function original(a, b){
    console.log(this.name);
    console.log([a, b]);
}
var bound = original.bindFn(obj, 1);
bound(2); // '轩辕Rowboat', [1, 2]

如果面试官看到你答到这里,估计对你的印象60、70分应该是会有的。
但我们知道函数是可以用new来实例化的。那么bind()返回值函数会是什么表现呢。

接下来看例子3

var obj = {
    name: '轩辕Rowboat',
};
function original(a, b){
    console.log('this', this); // original {}
    console.log('typeof this', typeof this); // object
    this.name = b;
    console.log('name', this.name); // 2
    console.log('this', this);  // original {name: 2}
    console.log([a, b]); // 1, 2
}
var bound = original.bind(obj, 1);
var newBoundResult = new bound(2);
console.log(newBoundResult, 'newBoundResult'); // original {name: 2}

例子3种可以看出this指向了new bound()生成的新对象。

可以分析得出结论3:

1、bind原先指向obj的失效了,其他参数有效。

2、new bound的返回值是以original原函数构造器生成的新对象。original原函数的this指向的就是这个新对象。
另外前不久写过一篇文章:面试官问:能否模拟实现JS的new操作符。简单摘要:
new做了什么:

1.创建了一个全新的对象。<br/>
2.这个对象会被执行[[Prototype]](也就是__proto__)链接。<br/>
3.生成的新对象会绑定到函数调用的this。<br/>
4.通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。<br/>
5.如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用会自动返回这个新的对象。

所以相当于new调用时,bind的返回值函数bound内部要模拟实现new实现的操作。
话不多说,直接上代码。

// 第三版 实现new调用
Function.prototype.bindFn = function bind(thisArg){
    if(typeof this !== 'function'){
        throw new TypeError(this + ' must be a function');
    }
    // 存储调用bind的函数本身
    var self = this;
    // 去除thisArg的其他参数 转成数组
    var args = [].slice.call(arguments, 1);
    var bound = function(){
        // bind返回的函数 的参数转成数组
        var boundArgs = [].slice.call(arguments);
        var finalArgs = args.concat(boundArgs);
        // new 调用时,其实this instanceof bound判断也不是很准确。es6 new.target就是解决这一问题的。
        if(this instanceof bound){
            // 这里是实现上文描述的 new 的第 1, 2, 4 步
            // 1.创建一个全新的对象
            // 2.并且执行[[Prototype]]链接
            // 4.通过`new`创建的每个对象将最终被`[[Prototype]]`链接到这个函数的`prototype`对象上。
            // self可能是ES6的箭头函数,没有prototype,所以就没必要再指向做prototype操作。
            if(self.prototype){
                // ES5 提供的方案 Object.create()
                // bound.prototype = Object.create(self.prototype);
                // 但 既然是模拟ES5的bind,那浏览器也基本没有实现Object.create()
                // 所以采用 MDN ployfill方案 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create
                function Empty(){}
                Empty.prototype = self.prototype;
                bound.prototype = new Empty();
            }
            // 这里是实现上文描述的 new 的第 3 步
            // 3.生成的新对象会绑定到函数调用的`this`。
            var result = self.apply(this, finalArgs);
            // 这里是实现上文描述的 new 的第 5 步
            // 5.如果函数没有返回对象类型`Object`(包含`Functoin`, `Array`, `Date`, `RegExg`, `Error`),
            // 那么`new`表达式中的函数调用会自动返回这个新的对象。
            var isObject = typeof result === 'object' && result !== null;
            var isFunction = typeof result === 'function';
            if(isObject || isFunction){
                return result;
            }
            return this;
        }
        else{
            // apply修改this指向,把两个函数的参数合并传给self函数,并执行self函数,返回执行结果
            return self.apply(thisArg, finalArgs);
        }
    };
    return bound;
}

面试官看到这样的实现代码,基本就是满分了,心里独白:这小伙子/小姑娘不错啊。不过可能还会问this instanceof bound不准确问题。
上文注释中提到this instanceof bound也不是很准确,ES6 new.target很好的解决这一问题,我们举个例子4:

instanceof 不准确,ES6 new.target很好的解决这一问题

function Student(name){
    if(this instanceof Student){
        this.name = name;
        console.log('name', name);
    }
    else{
        throw new Error('必须通过new关键字来调用Student。');
    }
}
var student = new Student('轩辕');
var notAStudent = Student.call(student, 'Rowboat'); // 不抛出错误,且执行了。
console.log(student, 'student', notAStudent, 'notAStudent');

function Student2(name){
    if(typeof new.target !== 'undefined'){
        this.name = name;
        console.log('name', name);
    }
    else{
        throw new Error('必须通过new关键字来调用Student2。');
    }
}
var student2 = new Student2('轩辕');
var notAStudent2 = Student2.call(student2, 'Rowboat');
console.log(student2, 'student2', notAStudent2, 'notAStudent2'); // 抛出错误

细心的同学可能会发现了这版本的代码没有实现bind后的bound函数的nameMDN Function.namelengthMDN Function.length。面试官可能也发现了这一点继续追问,如何实现,或者问是否看过es5-shim的源码实现L201-L335。如果不限ES版本。其实可以用ES5Object.defineProperties来实现。

Object.defineProperties(bound, {
    'length': {
        value: self.length,
    },
    'name': {
        value: 'bound ' + self.name,
    }
});

es5-shim的源码实现bind

直接附上源码(有删减注释和部分修改等)

var $Array = Array;
var ArrayPrototype = $Array.prototype;
var $Object = Object;
var array_push = ArrayPrototype.push;
var array_slice = ArrayPrototype.slice;
var array_join = ArrayPrototype.join;
var array_concat = ArrayPrototype.concat;
var $Function = Function;
var FunctionPrototype = $Function.prototype;
var apply = FunctionPrototype.apply;
var max = Math.max;
// 简版 源码更复杂些。
var isCallable = function isCallable(value){
    if(typeof value !== 'function'){
        return false;
    }
    return true;
};
var Empty = function Empty() {};
// 源码是 defineProperties
// 源码是bind笔者改成bindFn便于测试
FunctionPrototype.bindFn = function bind(that) {
    var target = this;
    if (!isCallable(target)) {
        throw new TypeError('Function.prototype.bind called on incompatible ' + target);
    }
    var args = array_slice.call(arguments, 1);
    var bound;
    var binder = function () {
        if (this instanceof bound) {
            var result = apply.call(
                target,
                this,
                array_concat.call(args, array_slice.call(arguments))
            );
            if ($Object(result) === result) {
                return result;
            }
            return this;
        } else {
            return apply.call(
                target,
                that,
                array_concat.call(args, array_slice.call(arguments))
            );
        }
    };
    var boundLength = max(0, target.length - args.length);
    var boundArgs = [];
    for (var i = 0; i < boundLength; i++) {
        array_push.call(boundArgs, '$' + i);
    }
    // 这里是Function构造方式生成形参length $1, $2, $3...
    bound = $Function('binder', 'return function (' + array_join.call(boundArgs, ',') + '){ return binder.apply(this, arguments); }')(binder);

    if (target.prototype) {
        Empty.prototype = target.prototype;
        bound.prototype = new Empty();
        Empty.prototype = null;
    }
    return bound;
};

你说出es5-shim源码bind实现,感慨这代码真是高效、严谨。面试官心里独白可能是:你就是我要找的人,薪酬福利你可以和HR去谈下。

最后总结一下

1、bindFunction原型链中的Function.prototype的一个属性,它是一个函数,修改this指向,合并参数传递给原函数,返回值是一个新的函数。

2、bind返回的函数可以通过new调用,这时提供的this的参数被忽略,指向了new生成的全新对象。内部模拟实现了new操作符。

3、es5-shim源码模拟实现bind时用Function实现了length

事实上,平时其实很少需要使用自己实现的投入到生成环境中。但面试官通过这个面试题能考察很多知识。比如this指向,原型链,闭包,函数等知识,可以扩展很多。

读者发现有不妥或可改善之处,欢迎指出。另外觉得写得不错,可以点个赞,也是对笔者的一种支持。

文章中的例子和测试代码放在githubbind模拟实现 githubbind模拟实现 预览地址F12看控制台输出,结合source面板查看效果更佳。

// 最终版 删除注释 详细注释版请看上文
Function.prototype.bind = Function.prototype.bind || function bind(thisArg){
    if(typeof this !== 'function'){
        throw new TypeError(this + ' must be a function');
    }
    var self = this;
    var args = [].slice.call(arguments, 1);
    var bound = function(){
        var boundArgs = [].slice.call(arguments);
        var finalArgs = args.concat(boundArgs);
        if(this instanceof bound){
            if(self.prototype){
                function Empty(){}
                Empty.prototype = self.prototype;
                bound.prototype = new Empty();
            }
            var result = self.apply(this, finalArgs);
            var isObject = typeof result === 'object' && result !== null;
            var isFunction = typeof result === 'function';
            if(isObject || isFunction){
                return result;
            }
            return this;
        }
        else{
            return self.apply(thisArg, finalArgs);
        }
    };
    return bound;
}

参考

OshotOkill翻译的 深入理解ES6 简体中文版 - 第三章 函数(虽然我是看的纸质书籍,但推荐下这本在线的书)
MDN Function.prototype.bind
冴羽: JavaScript深入之bind的模拟实现
《react状态管理与同构实战》侯策:从一道面试题,到“我可能看了假源码”

笔者学习源码整体架构系列

1.学习 jQuery 源码整体架构,打造属于自己的 js 类库
2.学习 underscore 源码整体架构,打造属于自己的函数式编程类库
3.学习 lodash 源码整体架构,打造属于自己的函数式编程类库
4.学习 sentry 源码整体架构,打造属于自己的前端异常监控SDK
5.学习 vuex 源码整体架构,打造属于自己的状态管理库
6.学习 axios 源码整体架构,打造属于自己的请求库
7.学习 koa 源码的整体架构,浅析koa洋葱模型原理和co原理

关于

作者:常以轩辕Rowboat若川为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少,唯善学。
若川的博客,使用vuepress重构了,阅读体验可能更好些
掘金专栏,欢迎关注~
segmentfault前端视野专栏,欢迎关注~
知乎前端视野专栏,欢迎关注~
github blog,相关源码和资源都放在这里,求个star^_^~

欢迎加微信交流和关注公众号

可能比较有趣的微信公众号,长按扫码关注。也可以加微信 ruochuan12,注明来源,拉您进【前端视野交流群】。

若川视野

查看原文

白衣莹墨 赞了文章 · 2020-08-08

面试官问:能否模拟实现JS的bind方法

前言

这是面试官问系列的第二篇,旨在帮助读者提升JS基础知识,包含new、call、apply、this、继承相关知识。
面试官问系列文章如下:感兴趣的读者可以点击阅读。
1.面试官问:能否模拟实现JS的new操作符
2.面试官问:能否模拟实现JS的bind方法
3.面试官问:能否模拟实现JS的call和apply方法
4.面试官问:JS的this指向
5.面试官问:JS的继承

用过React的同学都知道,经常会使用bind来绑定this

import React, { Component } from 'react';
class TodoItem extends Component{
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        console.log('handleClick');
    }
    render(){
        return  (
            <div onClick={this.handleClick}>点击</div>
        );
    };
}
export default TodoItem;

那么面试官可能会问是否想过bind到底做了什么,怎么模拟实现呢。

附上之前写文章写过的一段话:已经有很多模拟实现bind的文章,为什么自己还要写一遍呢。学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。只有自己去登山,才能看到不一样的风景,体会才更加深刻。

先看一下bind是什么。从上面的React代码中,可以看出bind执行后是函数,并且每个函数都可以执行调用它。
眼见为实,耳听为虚。读者可以在控制台一步步点开例子1中的obj:

var obj = {};
console.log(obj);
console.log(typeof Function.prototype.bind); // function
console.log(typeof Function.prototype.bind());  // function
console.log(Function.prototype.bind.name);  // bind
console.log(Function.prototype.bind().name);  // bound

codeFunction.prototype.bind/code

因此可以得出结论1:

1、bindFunctoin原型链中Function.prototype的一个属性,每个函数都可以调用它。<br/>
2、bind本身是一个函数名为bind的函数,返回值也是函数,函数名是bound 。(打出来就是bound加上一个空格)。
知道了bind是函数,就可以传参,而且返回值'bound '也是函数,也可以传参,就很容易写出例子2

后文统一 bound 指原函数originalbind之后返回的函数,便于说明。

var obj = {
    name: '轩辕Rowboat',
};
function original(a, b){
    console.log(this.name);
    console.log([a, b]);
    return false;
}
var bound = original.bind(obj, 1);
var boundResult = bound(2); // '轩辕Rowboat', [1, 2]
console.log(boundResult); // false
console.log(original.bind.name); // 'bind'
console.log(original.bind.length); // 1
console.log(original.bind().length); // 2 返回original函数的形参个数
console.log(bound.name); // 'bound original'
console.log((function(){}).bind().name); // 'bound '
console.log((function(){}).bind().length); // 0

由此可以得出结论2:

1、调用bind的函数中的this指向bind()函数的第一个参数。

2、传给bind()的其他参数接收处理了,bind()之后返回的函数的参数也接收处理了,也就是说合并处理了。

3、并且bind()后的namebound + 空格 + 调用bind的函数名。如果是匿名函数则是bound + 空格

4、bind后的返回值函数,执行后返回值是原函数(original)的返回值。

5、bind函数形参(即函数的length)是1bind后返回的bound函数形参不定,根据绑定的函数原函数(original)形参个数确定。

根据结论2:我们就可以简单模拟实现一个简版bindFn

// 第一版 修改this指向,合并参数
Function.prototype.bindFn = function bind(thisArg){
    if(typeof this !== 'function'){
        throw new TypeError(this + 'must be a function');
    }
    // 存储函数本身
    var self = this;
    // 去除thisArg的其他参数 转成数组
    var args = [].slice.call(arguments, 1);
    var bound = function(){
        // bind返回的函数 的参数转成数组
        var boundArgs = [].slice.call(arguments);
        // apply修改this指向,把两个函数的参数合并传给self函数,并执行self函数,返回执行结果
        return self.apply(thisArg, args.concat(boundArgs));
    }
    return bound;
}
// 测试
var obj = {
    name: '轩辕Rowboat',
};
function original(a, b){
    console.log(this.name);
    console.log([a, b]);
}
var bound = original.bindFn(obj, 1);
bound(2); // '轩辕Rowboat', [1, 2]

如果面试官看到你答到这里,估计对你的印象60、70分应该是会有的。
但我们知道函数是可以用new来实例化的。那么bind()返回值函数会是什么表现呢。

接下来看例子3

var obj = {
    name: '轩辕Rowboat',
};
function original(a, b){
    console.log('this', this); // original {}
    console.log('typeof this', typeof this); // object
    this.name = b;
    console.log('name', this.name); // 2
    console.log('this', this);  // original {name: 2}
    console.log([a, b]); // 1, 2
}
var bound = original.bind(obj, 1);
var newBoundResult = new bound(2);
console.log(newBoundResult, 'newBoundResult'); // original {name: 2}

例子3种可以看出this指向了new bound()生成的新对象。

可以分析得出结论3:

1、bind原先指向obj的失效了,其他参数有效。

2、new bound的返回值是以original原函数构造器生成的新对象。original原函数的this指向的就是这个新对象。
另外前不久写过一篇文章:面试官问:能否模拟实现JS的new操作符。简单摘要:
new做了什么:

1.创建了一个全新的对象。<br/>
2.这个对象会被执行[[Prototype]](也就是__proto__)链接。<br/>
3.生成的新对象会绑定到函数调用的this。<br/>
4.通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。<br/>
5.如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用会自动返回这个新的对象。

所以相当于new调用时,bind的返回值函数bound内部要模拟实现new实现的操作。
话不多说,直接上代码。

// 第三版 实现new调用
Function.prototype.bindFn = function bind(thisArg){
    if(typeof this !== 'function'){
        throw new TypeError(this + ' must be a function');
    }
    // 存储调用bind的函数本身
    var self = this;
    // 去除thisArg的其他参数 转成数组
    var args = [].slice.call(arguments, 1);
    var bound = function(){
        // bind返回的函数 的参数转成数组
        var boundArgs = [].slice.call(arguments);
        var finalArgs = args.concat(boundArgs);
        // new 调用时,其实this instanceof bound判断也不是很准确。es6 new.target就是解决这一问题的。
        if(this instanceof bound){
            // 这里是实现上文描述的 new 的第 1, 2, 4 步
            // 1.创建一个全新的对象
            // 2.并且执行[[Prototype]]链接
            // 4.通过`new`创建的每个对象将最终被`[[Prototype]]`链接到这个函数的`prototype`对象上。
            // self可能是ES6的箭头函数,没有prototype,所以就没必要再指向做prototype操作。
            if(self.prototype){
                // ES5 提供的方案 Object.create()
                // bound.prototype = Object.create(self.prototype);
                // 但 既然是模拟ES5的bind,那浏览器也基本没有实现Object.create()
                // 所以采用 MDN ployfill方案 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create
                function Empty(){}
                Empty.prototype = self.prototype;
                bound.prototype = new Empty();
            }
            // 这里是实现上文描述的 new 的第 3 步
            // 3.生成的新对象会绑定到函数调用的`this`。
            var result = self.apply(this, finalArgs);
            // 这里是实现上文描述的 new 的第 5 步
            // 5.如果函数没有返回对象类型`Object`(包含`Functoin`, `Array`, `Date`, `RegExg`, `Error`),
            // 那么`new`表达式中的函数调用会自动返回这个新的对象。
            var isObject = typeof result === 'object' && result !== null;
            var isFunction = typeof result === 'function';
            if(isObject || isFunction){
                return result;
            }
            return this;
        }
        else{
            // apply修改this指向,把两个函数的参数合并传给self函数,并执行self函数,返回执行结果
            return self.apply(thisArg, finalArgs);
        }
    };
    return bound;
}

面试官看到这样的实现代码,基本就是满分了,心里独白:这小伙子/小姑娘不错啊。不过可能还会问this instanceof bound不准确问题。
上文注释中提到this instanceof bound也不是很准确,ES6 new.target很好的解决这一问题,我们举个例子4:

instanceof 不准确,ES6 new.target很好的解决这一问题

function Student(name){
    if(this instanceof Student){
        this.name = name;
        console.log('name', name);
    }
    else{
        throw new Error('必须通过new关键字来调用Student。');
    }
}
var student = new Student('轩辕');
var notAStudent = Student.call(student, 'Rowboat'); // 不抛出错误,且执行了。
console.log(student, 'student', notAStudent, 'notAStudent');

function Student2(name){
    if(typeof new.target !== 'undefined'){
        this.name = name;
        console.log('name', name);
    }
    else{
        throw new Error('必须通过new关键字来调用Student2。');
    }
}
var student2 = new Student2('轩辕');
var notAStudent2 = Student2.call(student2, 'Rowboat');
console.log(student2, 'student2', notAStudent2, 'notAStudent2'); // 抛出错误

细心的同学可能会发现了这版本的代码没有实现bind后的bound函数的nameMDN Function.namelengthMDN Function.length。面试官可能也发现了这一点继续追问,如何实现,或者问是否看过es5-shim的源码实现L201-L335。如果不限ES版本。其实可以用ES5Object.defineProperties来实现。

Object.defineProperties(bound, {
    'length': {
        value: self.length,
    },
    'name': {
        value: 'bound ' + self.name,
    }
});

es5-shim的源码实现bind

直接附上源码(有删减注释和部分修改等)

var $Array = Array;
var ArrayPrototype = $Array.prototype;
var $Object = Object;
var array_push = ArrayPrototype.push;
var array_slice = ArrayPrototype.slice;
var array_join = ArrayPrototype.join;
var array_concat = ArrayPrototype.concat;
var $Function = Function;
var FunctionPrototype = $Function.prototype;
var apply = FunctionPrototype.apply;
var max = Math.max;
// 简版 源码更复杂些。
var isCallable = function isCallable(value){
    if(typeof value !== 'function'){
        return false;
    }
    return true;
};
var Empty = function Empty() {};
// 源码是 defineProperties
// 源码是bind笔者改成bindFn便于测试
FunctionPrototype.bindFn = function bind(that) {
    var target = this;
    if (!isCallable(target)) {
        throw new TypeError('Function.prototype.bind called on incompatible ' + target);
    }
    var args = array_slice.call(arguments, 1);
    var bound;
    var binder = function () {
        if (this instanceof bound) {
            var result = apply.call(
                target,
                this,
                array_concat.call(args, array_slice.call(arguments))
            );
            if ($Object(result) === result) {
                return result;
            }
            return this;
        } else {
            return apply.call(
                target,
                that,
                array_concat.call(args, array_slice.call(arguments))
            );
        }
    };
    var boundLength = max(0, target.length - args.length);
    var boundArgs = [];
    for (var i = 0; i < boundLength; i++) {
        array_push.call(boundArgs, '$' + i);
    }
    // 这里是Function构造方式生成形参length $1, $2, $3...
    bound = $Function('binder', 'return function (' + array_join.call(boundArgs, ',') + '){ return binder.apply(this, arguments); }')(binder);

    if (target.prototype) {
        Empty.prototype = target.prototype;
        bound.prototype = new Empty();
        Empty.prototype = null;
    }
    return bound;
};

你说出es5-shim源码bind实现,感慨这代码真是高效、严谨。面试官心里独白可能是:你就是我要找的人,薪酬福利你可以和HR去谈下。

最后总结一下

1、bindFunction原型链中的Function.prototype的一个属性,它是一个函数,修改this指向,合并参数传递给原函数,返回值是一个新的函数。

2、bind返回的函数可以通过new调用,这时提供的this的参数被忽略,指向了new生成的全新对象。内部模拟实现了new操作符。

3、es5-shim源码模拟实现bind时用Function实现了length

事实上,平时其实很少需要使用自己实现的投入到生成环境中。但面试官通过这个面试题能考察很多知识。比如this指向,原型链,闭包,函数等知识,可以扩展很多。

读者发现有不妥或可改善之处,欢迎指出。另外觉得写得不错,可以点个赞,也是对笔者的一种支持。

文章中的例子和测试代码放在githubbind模拟实现 githubbind模拟实现 预览地址F12看控制台输出,结合source面板查看效果更佳。

// 最终版 删除注释 详细注释版请看上文
Function.prototype.bind = Function.prototype.bind || function bind(thisArg){
    if(typeof this !== 'function'){
        throw new TypeError(this + ' must be a function');
    }
    var self = this;
    var args = [].slice.call(arguments, 1);
    var bound = function(){
        var boundArgs = [].slice.call(arguments);
        var finalArgs = args.concat(boundArgs);
        if(this instanceof bound){
            if(self.prototype){
                function Empty(){}
                Empty.prototype = self.prototype;
                bound.prototype = new Empty();
            }
            var result = self.apply(this, finalArgs);
            var isObject = typeof result === 'object' && result !== null;
            var isFunction = typeof result === 'function';
            if(isObject || isFunction){
                return result;
            }
            return this;
        }
        else{
            return self.apply(thisArg, finalArgs);
        }
    };
    return bound;
}

参考

OshotOkill翻译的 深入理解ES6 简体中文版 - 第三章 函数(虽然我是看的纸质书籍,但推荐下这本在线的书)
MDN Function.prototype.bind
冴羽: JavaScript深入之bind的模拟实现
《react状态管理与同构实战》侯策:从一道面试题,到“我可能看了假源码”

笔者学习源码整体架构系列

1.学习 jQuery 源码整体架构,打造属于自己的 js 类库
2.学习 underscore 源码整体架构,打造属于自己的函数式编程类库
3.学习 lodash 源码整体架构,打造属于自己的函数式编程类库
4.学习 sentry 源码整体架构,打造属于自己的前端异常监控SDK
5.学习 vuex 源码整体架构,打造属于自己的状态管理库
6.学习 axios 源码整体架构,打造属于自己的请求库
7.学习 koa 源码的整体架构,浅析koa洋葱模型原理和co原理

关于

作者:常以轩辕Rowboat若川为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少,唯善学。
若川的博客,使用vuepress重构了,阅读体验可能更好些
掘金专栏,欢迎关注~
segmentfault前端视野专栏,欢迎关注~
知乎前端视野专栏,欢迎关注~
github blog,相关源码和资源都放在这里,求个star^_^~

欢迎加微信交流和关注公众号

可能比较有趣的微信公众号,长按扫码关注。也可以加微信 ruochuan12,注明来源,拉您进【前端视野交流群】。

若川视野

查看原文

赞 83 收藏 65 评论 0

白衣莹墨 提出了问题 · 2020-08-06

解决JS <script> 标签引入的 js 比内嵌 <script> 加载得慢

在 a.js 有一个类 class A {}

执行下面代码,发现报错 Uncaught ReferenceError: A is not defined

按道理来说,a.js 应该会在执行 <script> 标签之前解析完啊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script data-original="a.js" type="module"></script>
</head>
<body>


    <script>
    
        new A()
    
    </script>
    
</body>
</html>

关注 4 回答 2

白衣莹墨 提出了问题 · 2020-08-05

解决Vue 双向绑定的 setter ,改变形参影响实例对象

想写一个双向绑定的 demo,在做的时候出现了一个奇怪的现象

在 defineReactive 里面的 set 改变了形参 value 的值却会改变 vm 实例对象的值

value 是从 obj 里面的属性获得的 const value = obj[key]
而在 set 里面改变的只是形参,为何会改变实例对象的

求解!!!

事件触发的地方

node.addEventListener('input', (e) => {
    this.$vm.$data[value] = e.target.value
})
class Observer {
    constructor(data, vm) {
        this.iterationReactive(data)
    }
    iterationReactive(obj) {
        Object.keys(obj).forEach(key => {
            const value = obj[key]

            if (typeof value === 'object')
                this.iterationReactive(value)
            else {
                this.defineReactive(obj, key, value)
            }
        })
    }
    defineReactive(obj, key, value) {
        Object.defineProperty(obj, key, {
            get() {
                return value
            },
            set(newValue) {
                if (newValue === value) return
                
                // 这里
                value = newValue
            }
        })
    }
}

关注 2 回答 1

认证与成就

  • 获得 2 次点赞
  • 获得 14 枚徽章 获得 0 枚金徽章, 获得 2 枚银徽章, 获得 12 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-06-12
个人主页被 561 人浏览