1. call 函数的实现1234567891011121314151617Function.prototype.myCall = function (target, ...arg) { // 如果是null或者undfined 则指向window 不是对象类型则转化为包装类 target = target === null || target === undefined ? window : Object(target); Reflect.defineProperty(target, "fn", { configurable: true, writable: false, enumerable: false, value: this, }); // 隐式绑定 target.fn(...arg); // 删除fn Reflect.deleteProperty(target, "fn");};
2. apply 函数的实现12345678910111213141516 ...
1. 类的基本使用123456789101112131415161718// class中自动开启严格模式, new命令生成对象实例会自动调用constructor方法// class创建的类只能使用new来调用,不能直接调用class Person { constructor(name, age) { this.name = name; this.age = age; } // class中的方法会加入到Person的显示原型上 running() { console.log("running"); }}const p = new Person("aaa", 18);p.running();console.log(typeof Person); // function
2. 类的访问器方法1234567891011121314151617181920class Person { constructor(name, age) { ...
原型链实现继承1. 无继承代码123456789101112131415161718192021222324252627282930// 定义Person类function Person(name, age) { this.name = name; this.age = age;}Person.prototype.running = function () { console.log("running");};Person.prototype.eating = function () { console.log("eating");};// 定义Student类function Student(name, age, sno, score) { this.name = name; this.age = age; this.sno = sno; this.score = score;}Student.prototype.running = function ...
this 的绑定规则1. 默认绑定1234567891011121314151617//独立函数调用,this指向window//严格模式下独立函数调用,this指向undefindfunction foo() { console.log(this); //window}//独立函数调用foo();const obj = { name: "aaa", foo() { console.log(this); //obj },};//对象调起函数obj.foo();
2. 隐式绑定12345678function foo() { console.log(this); //obj}const obj = { bar: foo,};//隐式绑定obj.bar();
3. 显示绑定1234567891011121314151617181920212223242526272829303132const obj = { name: "zzz ...
javascript 事件循环机制1. javascript 是单线程javascript 是单线程的执行方式，但这其中会存在一些问题，就是如果当一个语句也需要执行很长时间的话，比如请求数据、定时器等后面的语句就得一直等着前面的语句执行结束后才会开始执行,显然这是不可取的。所以 javascript 将所有执行任务分为了同步任务和异步任务
2. 同步任务和异步任务同步任务的执行，其实就是跟前面那个案例一样，按照代码顺序和调用顺序，支持进入调用栈中并执行，执行结束后就移除调用栈。
而异步任务的执行，首先它依旧会进入调用栈中，然后发起调用，然后解释器会将其响应回调任务放入一个任务队列，紧接着调用栈会将这个任务移除。当主线程清空后，即所有同步任务结束后，解释器会读取任务队列，并依次将已完成的异步任务加入调用栈中并执行。
3. 宏任务和微任务在任务队列中，其实还分为宏任务队列和微任务队列，对应的里面存放的就是宏任务和微任务。宏任务和微任务都是异步任务
==宏任务队列主要有：ajax、setTimeout、setInterval、DOM 监听 等==
&# ...
实现一个深拷贝12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849const obj = { name: "aaa", age: 18, friend: ["bbb", "ccc", "ddd"], bar: { count: 1, foo: { msg: "hello world", }, }, add(n1, n2) { return n1 + n2; },};obj.self = obj;// 判断是否为对象类型function isObject(obj) { return typeof obj === "object" && obj !== null;}// WeakMap ...
Set12345678910111213141516171819202122232425262728293031323334353637383940414243444546// 创建Set 可以传入可迭代对象// set里的数据是不能重复的 set支持foreach和for..of等遍历方式const set = new Set();//添加元素set.add(1);set.add({ count: 1 });set.add(["aaa", "bbb"]);//删除元素set.delete(1);//判断是否存在某个元素set.has(1);//获取元素个数set.size;//清空setset.clear();//数据去重const nums = [1, 21, 142, 123, 21, 32, 142];const newNums = [];// 1.普通方式for (let item of nums) { if (!newNums.includes(item)) { newNums.pus ...
迭代器-Iterator1. 创建一个最基本的迭代器123456789101112131415161718192021const names = ["a", "b", "c"];// 创建一个names的迭代器// 1.迭代器是一个对象,该对象里必须有next方法// 2.next方法必须返回一个对象,返回的对象必须包含done(布尔值)和value两个属性let index = 0;const nameInterator = { next() { if (index < names.length) { return { done: false, value: names[index++] }; } else { return { done: true, value: undefined }; } },};console.log(nameInterator.ne ...
React-TypeScript 项目搭建1. 使用脚手架创建项目1create-react-app react_demo(项目名称) --template typescript
2. 安装 craco 配置项目路径别名123npm install @craco/craco@alpha -Dnpm install craco-less@2.1.0-alpha.0
2.1 新建 craco.config.js123456789101112131415const path = require("path");const CracoLessPlugin = require("craco-less");module.exports = { plugins: [ { plugin: CracoLessPlugin, }, ], webpack: { alias: { "@": path.resolve(__dirname, "sr ...
1. React-Vite 搭建1npm create vite@latest my-react-app -- --template react
2. 绑定 class 和 style2.1 动态绑定 class2.1.1 写法一123456789import React, { memo, useState } from "react";const App = memo(() => { const [isActive, setIsActive] = useState(true); // isActive为true时 动态添加active类名 return <div className={`title ${isActive ? "active" : ""} `}>App</div>;});export default App;
2.1.2 写法二12345678910111213import React, &# ...
