Blog | Fanceir's Blog

博客

代码人生：编织技术与生活的博客之旅

2025 年暑期实习

今天是 2025 年 3 月 29 日，距离暑期实习还有大概 20 天，很荣幸能够在前两天收到了美团的 offer，期待 4 月 21 日的入职，暑期实习大概是从今年过年期间开始准备的，一开始没有打算找到一个像美团这样的大厂，主要是想找一个能学到东西的实习，后来在 3 月 5 日的时候投了美团的实习，没想到就收到了面试通知，面试的过程也很顺利，主要是做了一些算法题和系统设计题，最后也顺利通过了面试，拿到了 offer。说来也是比较巧的，在三月八号的时候我投了本地的一个小厂，当时面试真的汗流浃背了，就在上周三，我还是处于没有通过一面的状态，很感激面试官的耐心，给了我很多建议，其实已经迫不及待想要开始实习了，期待能在美团学到更多的东西，当然也希望能在实习期间结识到更多的朋友。

2025年3月29日blog阅读需 1 分钟

阅读更多

2025 年的第一次博客

今天是 2025 年第一次写博客，主要的想法是规划一下今年的生活，今天收获了第一台苹果设备 MacBook Pro ，也是人生中第一次负债（向父母借贷 1.25w），准备等给小孩哥补课和开学后的实习赚钱还完贷款。

今年的目标主要是完成还贷款，在 3 月的时候找到实习，然后再暑期的时候继续实习，以便在秋招能够找到工作，不求大富大贵，希望不要给父母添麻烦。计划是 12 号前，把杂七杂八的 react19 的新内容看看，把以前有些不会的知识点过一遍，然后准备做出一个小项目，最好是在 26 号之前完成，然后花两天时间改一下简历。还要做的就是需要在年钟把八股的东西准备一下，然后再把一些常见的问题准备一下，然后就是等待面试了，年后就投简历，目前项目还是有点不足的，需要加油。年后再看吧，还会再补充的，同时博客也会开始更新了，显示 react 的复习，也许会有很多新鲜的小工具 😀 gogogo

2025年1月7日blog阅读需 2 分钟

js中的原型

prototype

所有的函数都有一个prototype属性将函数看成是一个普通的对象时，它具备__proto__属性

构造函数Parent有一个原型对象Parent.prototype上面有一个constructor Parent可以通过 prototype 指向原型原型Parent.prototype可以通过constructor指向构造函数

function Parent() {
    this.name = "parent";
}

var p = new Parent();
console.log(p.__proto__ === Parent.prototype); // true

__proto__是一个指向原型对象的指针，它指向的是Parent.prototype 可以使用 getPrototypeOf

如果要创建一个新的对象同时继承另一个对象的属性，可以使用Object.create

function Parent() {
    this.name = "parent";
}
var p = new Parent();
var p1 = Object.create(p);

创造原型对象的方法

function createObject(o) {
    function f() {}
    f.prototype = o;
    return new f();
}
//创建对象的过程
function inherit(Subtype, Supertype) {
    Subtype.prototype = createObject(Supertype);
    Object.defineProperty(Subtype.prototype, "constructor", {
        enumerable: false,
        configurable: true,
        writable: true,
        vlaue: Subtype,
    });
}
//寄生式函数

这种方法是将子类的原型对象指向父类的原型对象，同时将子类的原型对象的构造函数指向子类

2024年9月13日javascript阅读需 1 分钟

手写柯里化

假设存在一个函数func func接受三个参数 a b c 那么函数最多被柯里化三次

function func(a, b, c) {
    return a + b + c;
}
var c1 = curry(func, 1);
var c2 = curry(func, 2);
var c3 = curry(func, 3);
c3(); //6

参数定长的柯里化

function curry(fn) {
    const argLen = fn.length;
    const presetArg = [].slice.call(arguments, 1);
    return function () {
        const restArgs = [].slice.call(arguments);
        const allArgs = [...presetArg, ...restArgs];
        if (allArgs.length >= argLen.length) {
            return fn.apply(this, allArgs);
        } else return curry.call(null, fn, ...allArgs);
    };
}

这样写我们的柯里化就支持三个参数的运算

function func(a, b, c) {
    return a + b + c;
}
var currried = curry(func);
curried(1, 2, 3);
curried(1)(2, 3);

参数不定长的柯里化

我们需要让这个函数满足返回一个函数并且可以通过这个函数来得到我们要的值

function curry_unlimited(fn) {
    const presetArg = [].slice.call(arguments, 1);
    function curry_unlimited() {
        const restArgs = [].slice.call(arguments);
        const allArgs = [...presetArg, ...restArgs];
        return curry_unlimited.call(null, fn, ...allArgs);
    }
    curry_unlimited.toString = function () {
        return fn.apply(null, presetArg);
    };
    return curry_unlimited;
}

测试这个参数不定长的柯里化

const curriedSum = curry_unlimited(sum);
function sum(...args) {
    return args.reduce((acc, curr) => acc + curr, 0);
}
// 测试不同的调用方式
console.log(curriedSum(1)(2)(3) + ""); // 输出 6
console.log(curriedSum(1, 2, 3)(4)(5) + ""); // 输出 15

2024年9月5日javascript阅读需 1 分钟

this 的绑定

函数在调用的过程中，JavaScript 会给 this 一个值
this 的绑定和定义的位置没有关系
this 的绑定和调用的方式和调用的位置有关

this 的四个绑定规则

默认绑定
隐式绑定
显示绑定
new 绑定

默认绑定

function foo() {
  console.log(this);
}
foo(); //这里独立函数调用输出window

把函数定义在对象中，但是独立调用

var obj = {
  name: "fanc",
  bar: function () {
    console.log("bar:", this);
  },
};
var bazzz = obj.bar;
bazzz();

严格模式下独立调用函数中的 this 指向的是 undefined

隐式绑定

必须在调用对象的内部有一个对函数的引用，如果没有这样的引用就会报错找不到函数

function foo() {
  console.log("foo:", this);
}
var obj = {
  bar: foo,
};
obj.bar();

function foo() {
  console.log(this);
}
var obj1 = {
  name: "obj1",
  foo: foo,
};
var obj2 = {
  name: "obj2",
  foo: foo,
  obj1: obj1,
};
foo(); // window
obj1.foo(); // obj1
obj2.foo(); // obj2
obj2.obj1.foo(); // obj1

obj2.obj1就是调用了 obj1

new 绑定

创建一个全新的对象这个新对象会被执行 prototype 连接这个欣对象会绑定到函数调用的 this 上如果函数没有返回其他的对象，表达式会返回这个新对象

function preson() {
  console.log("foo:", this); //person
}
new foo();

显示绑定

var obj = {
  name: "obj",
};
function foo() {
  console.log("foo:", this);
}

//直接执行函数，this的指向为obj
foo.call(obj); //foo: {name: "obj"}
foo.apply(obj); //foo: {name: "obj"}

如果不想再对象内部包含这个函数的引用，可以使用 call 或者 apply 来改变 this 的指向

如果要传递参数怎么办 apply第一个参数是绑定 this 的第二个参数是传递额外的实参，是以数组的形式

function foo(a, b) {
  console.log("foo:", this, a, b);
}
foo.apply(obj, [1, 2]); //foo: {name: "obj"} 1 2

call 是多参数的形式来进行传递的

foo.call(obj, 1, 2); //foo: {name: "obj"} 1 2

bind

bind方法会创建一个新的绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入的第一个参数作为 this，传入的第二个参数加上绑定函数运行时传入的参数按顺序作为参数来调用原函数

function foo() {
  console.log("foo:", this);
}
var obj = {
  name: "obj",
};
var bar = foo; //这里bar是一个全局函数
bar(); //foo: window
//如果是
var bar1 = foo.bind(obj);
bar1(); //foo: {name: "obj"}

bind 也是和 call 一样的

function foo(a, b) {
  console.log("foo:", this, a, b);
}

内置函数的调用绑定

setTimeout(function () {
  console.log("foo:", this); //window
}, 1000);

[1, 2, 3].forEach(function (item) {
  console.log("item:", this);
}, "aaa");
//item: aaa

var btnEl = document.getElementById("btn");
btnEl.onclick = function () {
  console.log("this:", this); //btn
};

this 绑定的优先级

显示绑定的优先级高于隐式绑定

function foo() {
  console.log("foo:", this);
}
var obj1 = {
  name: "obj1",
  foo: foo,
};
var obj2 = {
  name: "obj2",
};
obj1.foo.call(obj2); //foo: {name: "obj2"}

这里的隐式绑定是 obj1.foo，但是显示绑定是 obj2

new 绑定高于隐式绑定

var obj = {
  name: "obj",
  foo: function () {
    console.log("foo:", this);
  },
};
new obj.foo(); //foo: {}

new 不可以和 call apply 一起使用

new 和 bind 可以一起使用并且 new 绑定高于显示绑定

function foo() {
  console.log("foo:", this);
}

var bar = foo.bind("aaa");
new bar(); //foo: {}

new 绑定高于显示绑定

var obj = {
  name: "obj",
  foo: function () {
    console.log("foo:", this);
  },
};
var bar = new obj.foo();

箭头函数的 this

箭头函数没有 this，箭头函数的 this 是继承外层的 this

var obj = {
  name: "obj",
  foo: function () {
    setTimeout(() => {
      console.log("foo:", this);
    }, 1000);
  },
};
obj.foo(); //foo: {name: "obj"}

2024年9月2日javascript阅读需 4 分钟

博客

prototype​

参数定长的柯里化​

参数不定长的柯里化​

默认绑定​

隐式绑定​

new 绑定​

显示绑定​

bind​

内置函数的调用绑定​

this 绑定的优先级​

显示绑定的优先级高于隐式绑定​

new 绑定高于隐式绑定​

new 和 bind 可以一起使用并且 new 绑定高于显示绑定​

new 绑定高于显示绑定​

箭头函数的 this​