韩城做网站,seo百度贴吧,十大淘宝运营电商公司,个人域名备案风险目录 原型链
引用类型#xff1a;__proto__(隐式原型)属性#xff0c;属性值是对象函数#xff1a;prototype(原型)属性#xff0c;属性值是对象
相关方法
person.prototype.isPrototypeOf(stu)
Object.getPrototypeOf(Object)替换已不推荐的Object._ _ proto _ _
Ob…目录 原型链
引用类型__proto__(隐式原型)属性属性值是对象函数prototype(原型)属性属性值是对象
相关方法
person.prototype.isPrototypeOf(stu)
Object.getPrototypeOf(Object)替换已不推荐的Object._ _ proto _ _
Object.create(instance) 以一个现有对象作为原型创建一个新对象
class类
ES6前构造函数和原型链
1.构造函数this.xx
2.类方法构造函数.prototype.funfunction(){}
继承
1.构造函数父类构造函数.call(this,x)
2.原型链Dog.prototype Object.create(Animal.prototype)
3.修正prototype上的构造函数Dog.prototype.constructor Dog
ES6:class
constructor可没有默认会创建
super必须实现
执行上下文/作用域执行环境(变量函数)存于 变量对象
全局执行上下文this 指向window全局对象
函数执行上下文每次调用会创建新的执行上下文
作用链作用域链表
查找不到原型链undefined作用域链ReferenceError
this
全局环境普通函数/匿名函数window/undefined 严格模式
调用函数的对象
JS预解析/编译变量提升var、function变量 创建作用域
闭包函数返回函数且子函数 调用 父级作用域的变量
内存泄漏内存浪费-慢-崩溃
不再使用/为空的引用未被移除闭包/DOM移除子节点引用没移除
垃圾回收自动定期不需要的引用设置为null
模块化规范一个模块实现特定功能的一组方法。
几个函数全局变量的污染模块间没有联系。
ES6新增
数据类型
基本SymbolBigintES10
引用/Object对象Set Map键stringsymbol/值对Promise解决回调地狱
WeakSet:弱引用不被引用时会被回收对象
WeakMap键弱引用对象/值对
Map任何值函数、对象、基本类型都可以作为键/值size可迭代删减优化
Object键String、SymbolJSON序列化JSON.stringify()和解析JSON.parse()
运算符
变量的解构赋值从数组/对象中取值
数组/对象扩展运算符(浅拷贝)
函数
箭头函数简洁
继承上一层作用域链的this
不绑定arguments,用rest参数
因为没有function声明所以没有原型prototype所以不能作为构造函数
rest 参数...真正的数组
ES7 的async/await函数替代了ES6 的Generator 函数
字符串方法${ }单反引号
块级作用域let,const
ES6 前作用域 全局变量 与 函数内的局部变量。
块级作用域{}if(){},for(){}等
var重复声明变量提升
let、const块作用域里访问无重复声明变量提升
const 必须初始化语法错误SyntaxError栈值/内存地址不变类型错误TypeError
定义类的语法糖(class)
模块化import/export
类型转换
Number
显式类型转换
Number(任意类型)若string含非数字会返回NaN
parseInt(string[,radix])基数radix是2-36之间的整数
parseFloat(string)解析一个参数并返回一个浮点数
隐式转换str-含boolean的相加
str - 1 //122
str1 // 124
str1 // 1231
string
显式类型转换
除了null/undefined.toString()
String(任意类型)
隐式转换含str的相加
Boolean
显式类型转换
Boolean()0, (空字符串), null, undefined, NaN会转成false其它都是true
隐式转换 !!
判断数据类型
运算符
typeof判断 基本数据类型
typeof nullObject 类型标签均为000
实例 instanceof 构造函数判断原型链和isPrototypeOf
方法
构造函数.prototype.isPrototypeOf(实例) 判断原型链
(数据).constructor 数据类型不包含继承类型
显示toStringvalueOf 除了nullundefined
valueOfthis 值转换成对象。除了Date都是返回数据本身
console.log
toString重写对象的类型转换。console.log
松散相等可自动转换类型 和 严格相等
比较的是内存单元的内容
set判断相等
DOM事件流:捕获-冒泡
遍历strnumsetmap)
for ofvalObject.keys(obj)自身属性
for inidx 包括继承的可枚举属性
可遍历对象的 公有 可枚举属性除symbol 属性
obj.hasOwnProperty(prop) 避免遍历原型链上的属性
forEachvalue[indexarr]不改变原数组返回undefined
无法中断 break (Illegal break statement)和 return (无效)
mapvalue[indexarr]返回新的数组
执行速度优于forEach底层做了优化
高阶函数params / return func
函数柯里化return func
手写
改变this
call
typeof this ! function
context context || window
context._this this
delete context._this
bind return _this.apply(context, [...arguments].slice(1));
深拷贝
!arr|| arr null || typeof arr ! object
arr instanceof Array ? [] : {}
for (const key in arr)
result[key] cloneDeep(arr[key]) 原型链
引用类型__proto__(隐式原型)属性属性值是对象函数prototype(原型)属性属性值是对象
相关方法
person.prototype.isPrototypeOf(stu)
Object.getPrototypeOf(Object)替换已不推荐的Object._ _ proto _ _
Object.create(instance) 以一个现有对象作为原型创建一个新对象
class类
ES6前构造函数和原型链
1.构造函数this.xx
2.类方法构造函数.prototype.funfunction(){}
继承
1.构造函数父类构造函数.call(this,x)
2.原型链Dog.prototype Object.create(Animal.prototype)
3.修正prototype上的构造函数Dog.prototype.constructor Dog
// 使用构造函数和原型链定义类
function Animal(name) {this.name name;
}Animal.prototype.speak function() {console.log(this.name makes a sound.);
};// 创建类的实例
const dog new Animal(Dog);
dog.speak(); // 输出: Dog makes a sound.// 继承一个类
function Dog(name, breed) {Animal.call(this, name);this.breed breed;
}
//Object.create() 静态方法以一个现有对象作为原型创建一个新对象
Dog.prototype Object.create(Animal.prototype);
//修正构造函数
Dog.prototype.constructor Dog;Dog.prototype.speak function() {console.log(this.name barks loudly.);
};const myDog new Dog(Buddy, Golden Retriever);
myDog.speak(); // 输出: Buddy barks loudly.ES6:class
constructor可没有默认会创建
super必须实现
执行上下文/作用域执行环境(变量函数)存于 变量对象
全局执行上下文this 指向window全局对象
函数执行上下文每次调用会创建新的执行上下文 作用链作用域链表
查找不到原型链undefined作用域链ReferenceError this
全局环境普通函数/匿名函数window/undefined 严格模式
调用函数的对象
JS预解析/编译变量提升var、function变量 创建作用域
闭包函数返回函数且子函数 调用 父级作用域的变量
因为js作用域生命周期在于内部脚本是否全部执行完毕才会销毁并且不会带到父级作用域
因为被下级作用域内 引用而没有被释放。就导致上级作用域内的变量等到下级作用域执行完后 或者 当闭包子函数不再被引用时才会被释放。 function createCounter() {let counter 0const myFunction function() {counter counter 1return counter}return myFunction}const increment createCounter()const c1 increment()const c2 increment()const c3 increment()console.log(example increment, c1, c2, c3)//1 2 3
闭包会使得函数中的变量都被保存在内存中内存消耗很大所以不能滥用闭包滥用闭包容易内存泄漏。使用场景 : 防抖、节流、函数套函数避免全局污染
内存泄漏内存浪费-慢-崩溃
不再使用/为空的引用未被移除闭包/DOM移除子节点引用没移除
垃圾回收自动定期不需要的引用设置为null
(GC)Garbage Collection
浏览器的js具有自动垃圾回收机制垃圾回收机制也就是自动内存管理机制垃圾收集器会定期的找出不可访问的值然后释放内存所以将不需要的对象设为null即可。
模块化规范一个模块实现特定功能的一组方法。 几个函数全局变量的污染模块间没有联系。 // 模块A
var ModuleA {func1: function() {// ...},func2: function() {// ...}
};// 模块B
var ModuleB {func3: function() {// ...}
};
后面提出了对象通过将函数作为一个对象的方法来实现但是这种办法会暴露所 有的所有的模块成员外部代码可以修改内部属性的值。现在最常用的是立即执行函数的写法通过利用闭包来实现模块私有作用域的建立同时不会对全局作用域造成污染。 //IIFE立即调用函数表达式
//创建一个私有作用域避免变量之间的冲突。然后通过返回一个对象或函数来暴露模块的公共部分
// 模块A
var ModuleA (function() {var privateVar private;function privateFunc() {// ...}return {publicVar: public,publicFunc: function() {// ...}};
})();ES6 使用 import 和 export 的形式来导入导出模块。
ES6新增
数据类型
基本SymbolBigintES10
let bnum1684424684321231561n //方式1数组后加n
bunmBigInt(1684424684321231561)//方式2调用BigInt
引用/Object对象Set Map键stringsymbol/值对Promise解决回调地狱
WeakSet:弱引用不被引用时会被回收对象
WeakMap键弱引用对象/值对
Map任何值函数、对象、基本类型都可以作为键/值size可迭代删减优化
Object键String、SymbolJSON序列化JSON.stringify()和解析JSON.parse()
运算符
变量的解构赋值从数组/对象中取值 // 提取部分数组元素其余元素放在剩余数组中
const numbers [1, 2, 3, 4, 5];
const [first, second, ...rest] numbers;
console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(rest); // 输出: [3, 4, 5]// 从对象中提取属性并赋值给变量
const person { firstName: John, lastName: Doe };
const { firstName, lastName } person;
console.log(firstName); // 输出: John
console.log(lastName); // 输出: Doe// 提取属性并赋值给变量并指定默认值
const { age 30, occupation Engineer } person;
console.log(age); // 输出: 30 (因为age属性不存在)
console.log(occupation); // 输出: Engineer (因为occupation属性不存在)const nestedObject {outer: {inner: {deep: Hello, nested!}}
};const { outer: { inner: { deep } } } nestedObject;
console.log(deep); // 输出: Hello, nested!数组/对象扩展运算符(浅拷贝)
函数
箭头函数简洁
继承上一层作用域链的this
不绑定arguments,用rest参数
因为没有function声明所以没有原型prototype所以不能作为构造函数
rest 参数...真正的数组
function sum(...numbers) {let total 0;for (let number of numbers) {total number;}return total;
}console.log(sum(1, 2, 3)); // 输出 6ES7 的async/await函数替代了ES6 的Generator 函数
字符串方法${ }单反引号
块级作用域let,const
ES6 前作用域 全局变量 与 函数内的局部变量。
块级作用域{}if(){},for(){}等
var重复声明变量提升
let、const块作用域里访问无重复声明变量提升
const 必须初始化语法错误SyntaxError栈值/内存地址不变类型错误TypeError
定义类的语法糖(class)
模块化import/export
类型转换
Number
显式类型转换
Number(任意类型)若string含非数字会返回NaN
parseInt(string[,radix])基数radix是2-36之间的整数
parseFloat(string)解析一个参数并返回一个浮点数
隐式转换str-含boolean的相加
str 123 str - 1 //122 str1 // 124 str1 // 1231
string
显式类型转换
除了null/undefined.toString()
String(任意类型)
隐式转换含str的相加
Boolean
显式类型转换
Boolean()0, (空字符串), null, undefined, NaN会转成false其它都是true
隐式转换 !!
判断数据类型
运算符
typeof判断 基本数据类型
typeof nullObject 类型标签均为000
实例 instanceof 构造函数判断原型链和isPrototypeOf
Object.prototype.isPrototypeOf({})// true
{} instanceof Object// true方法
构造函数.prototype.isPrototypeOf(实例) 判断原型链
(数据).constructor 数据类型不包含继承类型
显示toStringvalueOf 除了nullundefined
valueOfthis 值转换成对象。除了Date都是返回数据本身
console.log toString重写对象的类型转换。console.log 松散相等可自动转换类型 和 严格相等
比较的是内存单元的内容
set判断相等 //Set用判断是否相等
const set new Set();
const obj1{ x: 10, y: 20 },obj2{ x: 10, y: 20 }
set.add(obj1).add(obj2);console.log(obj1obj2);//false
console.log(set.size);// 2set.add(obj1);
console.log(obj1obj1);//true
console.log(set.size);//2 DOM事件流:捕获-冒泡 事件捕获由外往内从事件发生的根节点开始逐级往下查找一直到目标元素。事件冒泡由内往外从具体的目标元素触发逐级向上传递直到根节点。
element.addEventListener(event, function[, useCapture]);
//useCapture 默认为false即冒泡阶段调用事件处理函数
//为ture时在事件捕获阶段调用处理函数 遍历strnumsetmap)
for ofvalObject.keys(obj)自身属性
for inidx 包括继承的可枚举属性
可遍历对象的 公有 可枚举属性除symbol 属性
obj.hasOwnProperty(prop) 避免遍历原型链上的属性
forEachvalue[indexarr]不改变原数组返回undefined
无法中断 break (Illegal break statement)和 return (无效)
mapvalue[indexarr]返回新的数组
执行速度优于forEach底层做了优化
高阶函数params / return func
函数柯里化return func
改变数组 push() 和 unshift() push() 方法用于在数组末尾添加一个或多个元素而 unshift() 方法用于在数组开头添加一个或多个元素。 pop() 和 shift() pop() 方法用于移除并返回数组末尾的元素而 shift() 方法用于移除并返回数组开头的元素。 splice() splice() 方法可以用于从数组中添加或删除元素。它可以指定一个起始索引和要删除的元素数量并可以选择性地插入新元素。 slice() slice() 方法用于创建一个从现有数组中选取元素的新数组。它接受起始索引和结束索引作为参数但不会修改原始数组。 map() map() 方法对数组中的每个元素应用一个函数并返回一个新数组新数组中的元素是原数组元素经过函数处理后的结果。 filter() filter() 方法根据给定的函数筛选出满足条件的数组元素返回一个新数组。 splice() splice() 方法可以插入、删除或替换数组的元素。它可以接受起始索引、删除的元素数量和要插入的新元素。 fill() fill() 方法可以用指定的值填充数组的元素可以指定填充的起始索引和结束索引。 sort() sort() 方法用于对数组元素进行排序可以传入比较函数以自定义排序方式。 reverse() reverse() 方法用于颠倒数组中元素的顺序。
手写
改变this
call typeof this ! function context context || window context._this this delete context._this // 给function的原型上面添加一个 _call 方法Function.prototype._call function (context) {// 判断调用者是否是一个函数 this 就是调用者if (typeof this ! function) {throw new TypeError(what is to be a function)}// 如果有 context 传参就是传参者 没有就是windowcontext context || window// 保存当前调用的函数context._this this // 截取传过来的参数/*argumentsa: 1fn: ƒ fns()*/// 通过 slice 来截取传过来的参数const local [...arguments].slice(1)// 传入参数调用函数let result context._this(...local)// 删属性delete context._thisreturn result}let obj { a: 1 }function fns(a, b) {console.log(a, b);console.log(this)}fns._call(obj, 23, 555)bind return _this.apply(context, [...arguments].slice(1));
深拷贝 !arr|| arr null || typeof arr ! object arr instanceof Array ? [] : {} for (const key in arr) result[key] cloneDeep(arr[key]) function cloneDeep(arr {}) {// 终止递归 if (!arr|| arr null || typeof arr ! object ) return arr// 用 instanceof 判断原型链上是否有该类型的原型 是 Array [] ! Arrays {}let resultarr instanceof Array ? [] : {}// forin 循环对象的key值for (const key in arr) {// 对象 key 赋值 resultresult[key] cloneDeep(arr[key])}return result}
