koala-coding / day-day-up

每天进步一点点,记录每天在公司的一个小收获,一年后你回顾肯定收获了很多,哪怕是你知道了一个新函数,甚至一个新单词都可以。也算是一个个人成长秘籍吧
Apache License 2.0
9 stars 0 forks source link

2020年01月13日你要记录点什么? #30

Open fecym opened 4 years ago

fecym commented 4 years ago

分享一个 bind 的实现

bind 基本用法

bind 用法和 call 很类似,但是 bind 不会立即执行函数,而是返回一个绑定了 this 的新函数

const obj = {name: 'cym'}
function fn(age) {
  console.log(this.name + '今年' + age + '岁了')
}
// 如上代码,我们要让 this 指向 obj
const bindFn = fn.bind(obj)
bindFn(24) // cym今年24岁了

基本功能的实现

根据上面的用法,我们不难 bind 的方法不仅可以绑定 this 还可以绑定参数,我们来简单实现一下

Function.prototype.bind2 = function(ctx = globalThis) {
  // 取到我们要绑定的参数
  const args = [...arguments].slice(1)
  // 缓存 this,因为返回一个函数 this 就会变成新的函数
  const that = this
  // 返回一个函数
  return function() {
    // 返回函数里面的 arguments 是返回函数传入的参数哦,别搞混了
    that.apply(ctx, args.concat([...arguments]))
  }
}

返回函数作为构造函数

bind 方法的实现其实蛮有意思的,因为 bind 方法返回一个函数,那么返回的这个函数如果被当做构造函数怎么办

const obj = {name: 'cym'}
function fn() {
  console.log(this)
}
// 如上代码,我们要让 this 指向 obj
const bindFn = fn.bind(obj)
const instance = new bindFn(24) // fn {}

根据上面的代码返回结果来看,我们发现当绑定的函数作为构造函数来用的话,this 指向了原来的函数的实例,那么我们来实现一下完整的 bind 方法

Function.prototype.bind2 = function(ctx = globalThis) {
  // 取得参数
  const args = [...arguments].slice(1)
  // 取得函数
  const that = this
  // 要返回一个函数,还要判断是否有进行实例化的操作
  function Fn() {
    const allArgs = args.concat([...arguments])
    // 如果被实例化了
    if (this instanceof Fn) {
      that.apply(this, allArgs)
    } else {
      that.apply(ctx, allArgs)
    }
  }
  // 但是我们需要保证原型不能丢失,还得是原来函数的实例
  // 这种写法可能不雅观,因为直接让两个原型指向了同一个地址,一般情况下我们会使用一个临时性构造函数来处理一下
  // Fn.prototype = this.prototype
  Fn.prototype = Object.create(this.prototype)
  // 返回这个绑定好 this 的函数
  return Fn
}

来看下用法

const obj = {name: 'cym'}
function fn() {
  console.log(this)
}
// 如上代码,我们要让 this 指向 obj
const bindFn = fn.bind2(obj)
const instance = new bindFn()   // fn {}
bindFn()  // {name: 'cym'}
sweetXiaoyan commented 4 years ago

知识点1: 解析域名

如何让一级域名默认打开www.xxx.com这个二级域名 通过解析一个CNAME类型的 @记录的域名, 然后指向www.xxx.com就可以;

知识点2: ts中的tuple

元组 tuple

tuple是在typescript中引入的新类型, 为什么需要引入呢? 我们定义一个数组

let num: number[] = [1,2,3,4,5]
let str: string[] =["a","b","c"];

可以发现上面定义的数组定义了整个数组的类型, 要是给num添加一个字符串,就不行; 所以引入元组, 它可以看做数组的拓展, 表示已知元素数量和类型的数组

看一个例子:

let tuple: [string, number, boolean]
tuple = ["abc", 1, true]
tuple = [2, "a", "b"]  // error不能将类型"number"分配给string. 

可以看到上面定义的元组tuple, 包含三个元素, 且每一个元素的类型是固定的, 各个位置上的元素的类型都要对应, 元素个数也要一致

fanglongfei321 commented 4 years ago

英语单词30个 造句5个 朗读新概念课文2篇

fanglongfei321 commented 4 years ago

1月14日 学习英语单词30个,朗读英语文章2篇, 学习造句5个。