
js进阶
Mamba_四哥
努力成为开着拖拉机前端工程师(Mamba forever!!!!)
展开
-
观察者模式
观察者模式定义观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己大家可以先模拟一个场景:pg-四哥是保安队的队长,权利特别大,他手底下有好多的小弟听他使唤。四哥每做一个动作就会又对应的小弟去做某件事情。有一个专门管家专门把四哥做的每个动作分配给相应的小弟。 // 这里每个函数就代表这每个小弟 function原创 2021-05-15 19:44:07 · 278 阅读 · 3 评论 -
Object.defineProperty
Object.defineProperty定义:该方法是在对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。监听对象下的某一个属性,做数据劫持处理。Object.defineProperty(obj, prop, descriptor)(1) 参一:要定义属性的对象。(2) 参二:要定义或修改的属性的名称或 Symbol (被监听的属性)。(3) 参三:要定义或修改的属性描述符 Object.defineProperty(obj, 'b', { value: 3原创 2021-05-15 19:30:20 · 207 阅读 · 0 评论 -
JavaScript中函数的length属性
JavaScript中函数的length属性length是函数的一个属性函数的length是js函数对象的一个属性,函数的length代表形参的个数(即有多少必传参数)形参的数量不包括不包括剩余参数的个数,仅包括“第一个具有默认值之前的参数个数”如:console.log("function(a = 1, b, c)",(function(a = 1, b, c) {}).length); // 0解释: 形参a有默认值为1,a之前并没有参数,所以length为0console.l原创 2021-04-26 16:07:50 · 5089 阅读 · 1 评论 -
函数柯里化(自己的理解)
柯里化把接受多个参数的函数变换成一系列接受单一参数(从最初函数的第一个参数开始)的函数的技术。(注意是单一参数)题目:如何实现 multi(2)(3)(4)=24?大家一看见这个题目脑海中首先浮现的解决方案是,闭包。闭包实现方案function multi(a) { return function (b) { return function (c) { return a * b * c } } } l原创 2021-04-26 15:06:12 · 165 阅读 · 0 评论 -
js中的节流个防抖
节流:在一定时间内函数只执行一次function throttle(func, waitTime) { let lock = false return function (e) { if (lock) { return } lock = true setTimeout(() => { func.apply(this, arguments) lock = false }, wai原创 2021-04-13 20:17:03 · 154 阅读 · 2 评论 -
js中的几种继承方式
原型链继承function Animal() { this.color = ['red', 'yellow'] } Animal.prototype.getColor = function() { this.color.push('22') } function Dog() {} Dog.prototype = new Animal() let dog1 = new Dog() dog1.color.push('blue')原创 2021-04-13 19:20:29 · 132 阅读 · 1 评论 -
数组的属性和方法
Array.from(伪数组) //1.数组对象中的静态成员方法: 不需要实例对象,直接通过构造函数调用 //a): Array.from(伪数组): 将伪数组转化为真正的数组 //b): 返回值,返回转化后的真数组 // let lis = document.querySelectorAll('li'); // console.log(lis); // let newlist = Array.from(lis); // console.log(new原创 2021-02-20 11:57:13 · 131 阅读 · 0 评论 -
面向对象tab切换
<style type="text/css"> * { margin: 0; padding: 0; list-style: none; /* css实现禁止文字选中: */ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/.原创 2021-02-20 11:56:56 · 138 阅读 · 0 评论 -
异常处理
异常处理 // 简单: 代码很固定 // 难点: 大家现在依然不清楚什么使用用异常处理(每一行代码都有异常处理 整个项目一行异常处理都没有)什么是异常处理? // 程序发生错误后(偶然事件),通过异常处理明确到底哪里出了问题. // 代码验证: // div.toString(); // 异常处理在程序中如何实现? // 1. 在程序可能出问题的地方,抛出一个异常(类似于交通信息提前预告) // 语法: throw new E原创 2021-02-20 11:56:45 · 139 阅读 · 0 评论 -
call(), apply(), bind()
call, apply, bind // 共同点: 都可以修改this指向 // 区别1: call和apply的参数形式不一样 // 区别2: bind和call, apply,bind在修改this指向的时候不会调用函数,而call和apply会调用函数代码验证1: // let obj = { // uname: '张三' // } // function fn(age, myheight){ // console.原创 2021-02-20 11:56:30 · 101 阅读 · 0 评论 -
深拷贝和浅拷贝
//程序中的拷贝,大多数是发生在数据之间的拷贝. //简单类型的数据: 直接拷贝值 //复杂类型的数据: 拷贝的是地址复杂类型直接的拷贝:浅拷贝 //a): 浅拷贝: 在对原始数据进行拷贝的时候,只拷贝一层数据,如果遇到对象,则 //直接将对象的地址进行拷贝 //b): 浅拷贝语法: Object.assign(新对象, 被拷贝的对象) //代码验证: // let obj = { // uname: 'zs', ...原创 2021-02-20 11:56:16 · 118 阅读 · 0 评论 -
es6中类的继承
类的本质上就是自定义构造函数的另外一种写法所以类也可以实现继承 类是如何实现继承的? //语法: // 类名 extends 类名 {} //代码验证: class Father { //在构造函数中设置了两个实例属性 constructor(uname, uage) { this.uname = uname; this.uage = uage; } //原创 2021-02-02 08:56:47 · 148 阅读 · 0 评论 -
es6中的类
1. 类的定义 // 语法: class 自定义类名 {} // 代码演示: 创建一个人类 //2. 构造函数写法 // function People() {} //3. 类的写法 // class People {} // 注意事项: // 1. 类的命名规则与构造函数的命名规则一样,也要遵守帕斯卡命名法(单词首字母大写) // 2. 类的定义必须通过class关键字定义,不能使用function //原创 2021-02-02 08:56:22 · 93 阅读 · 1 评论 -
遍历对象 for(自定义键变量 in 被遍历的对象)
遍历对象 // 与遍历数组类似,将对象中的值动态取出 // 对象中的值都是以键值对形式存在的 // 语法: // for(自定义键变量 in 被遍历的对象) { // //获取对应键的值 // 被遍历的对象[自定义键变量] // } //从对象中将值取出,通过对象解构实现 //弊端: 有可能程序员无法明确对象中到底有多少个属性原创 2021-02-02 08:55:48 · 421 阅读 · 2 评论 -
面向对象属性和方法的继承
属性继承//父亲的构造函数 function Father(uname, uage) { this.uname = uname; this.uage = uage; // this指向:指向Father创建的实例对象 } //儿子的构造函数 function Son(uname, uage) { //由于父类中已经有了姓名和年龄了,原创 2021-02-02 08:53:45 · 128 阅读 · 0 评论 -
constructor
什么是constructor?constructor: 构造函数,是每一个原型对象prototype和对象原型__proto__身上的一个属性 //代码验证constructor // function Fn() { // this.uname = 'zs'; // } // // console.log(Fn.prototype); // let zs = new Fn(); // console.log(zs.__proto__);原创 2021-02-02 08:53:27 · 166 阅读 · 0 评论 -
原型链
原型链什么是原型链? //原型链: 多个原型对象之间形成的一个链状结构原型链作用是什么? //通过原型链,可以更加明白方法的执行顺序作用域链是什么作用? //作用域链,可以明白变量的执行顺序 //代码演示原型链(纯纯的理论): function People(age) { this.age = age; } let zs = new People(23); //console.log(zs.age);提问: //请问当前实原创 2021-02-02 08:53:07 · 86 阅读 · 0 评论 -
对象原型__proto__
对象原型什么是对象原型? //a): 对象原型指的是__proto__, __proto__是每一个实例对象身上的属性且是对象的形式存在的 //b): 就将实例对象身上的属性 __proto__称为对象原型 //代码验证: // function People(uname) { // this.uname = uname; // } // let zs = new People('张三'); // console.log(zs.__p原创 2021-02-02 08:52:48 · 183 阅读 · 1 评论 -
原型对象prototype
原型对象: // 什么是原型对象?[prototype] //a): 概念: prototype叫原型,prototype是每一个构造函数身上的一个属性且是以对象形式存在的 //b): 验证prototype是不是构造函数身上的一个属性且是不是一个对象 // function Fn() { // this.uname = 'zs'; // } // //打印构造函数Fn // console.dir(Fn);原型对象prototyp原创 2021-02-02 08:52:22 · 134 阅读 · 0 评论 -
字符串中的方法
字符串中的方法介绍:1. 分割字符串split() a):通过split分割字符串后,返回的是一个数组 a):作用: 可以将一个复杂的字符串通过分割后提取对应的内容 b):举例: 请将字符串中的zs输出到控制台中 let str = 'username=zs'; 将字符串以=进行分割,分割后会返回一个数组 let ary = str.split('='); console.log(ary[1]); c): 分割字符串的时候,不要为难原创 2021-02-02 08:52:03 · 305 阅读 · 0 评论 -
实例成员和静态成员
成员: // 什么是成员: 构造函数中的属性或方法称为成员实例成员 // 构造函数中的成员分类: // a): 实例成员: 在构造函数内部通过this关键字设置的属性或方法 function Fn(uname) { //如下都是实例成员 this.uname = uname; this.uage = 23; this.eat = function() {} } // b): 实例成员如何访问:原创 2021-02-01 22:23:19 · 153 阅读 · 0 评论 -
自定义构造函数创建对象
自定义构造函数创建对象 // 1. 自定义: 需要程序员自己定义,js内部没有 // 2. 构造函数: 本质上依然是一个函数,作用也是用来创建对象的(函数需要我们自己定义) // 3. 自定义构造函数: 程序员自己定义的一个用来创建(声明)对象的函数 //为什么还要学习自定义构造函数创建对象?(前面的内置构造函数,字面量) //娓娓道来: // 内置构造函数(字面量)创建的对象,适用于创建单个对象或者数量少的对象 // let zs = {原创 2021-02-01 22:17:36 · 549 阅读 · 0 评论 -
内置构造函数创建对象
内置构造函数创建对象1. 什么是内置构造函数? // a): 内置: 就是js本身就自带(不需要程序员自己定义) // b): 构造函数: 本质上就是一个函数,构造函数是用来创建对象的 // c): 内置构造函数: js内部提供了一个用来创建对象的函数2. 如何通过内置构造函数创建对象呢? // 语法: let 对象名 = new Object();3.通过语法举例说明: //例如: 创建一个张三对象 let zs = new Object();原创 2021-02-01 22:15:03 · 490 阅读 · 0 评论 -
解构赋值
什么是解构?: es6中按照一定的模式,从数组或者对象中提取值// a): 如果是数组解构,则写 [] 模式// b): 如果是对象解构,则写 {} 模式// c): 从数组中和对象中取值v解构赋值作用?// 更简单的从数组中和对象中取值(减少代码量)演示数组解构:// 语法: let [变量1, 变量2, 变量3, ....] = 数组let ary = ['a', 'b', 'c', 'd', 'e'];// let a = ary[0];// 解构赋值let [test1原创 2021-02-01 22:12:52 · 150 阅读 · 0 评论 -
闭包函数
什么是闭包? // a): 闭包就是一个函数.可以读取或访问其他函数内部变量的这么一个函数(闭包函数)闭包的作用? // 闭包作用就是延长了变量的使用生命周期,避免变量污染 // 变量的生命周期是什么时候开始?什么时候结束? // 在函数中的变量,只要函数调用后,变量就会自动消失 // 代码演示: // 变量自动加1,然后输出结果 function fn() { let a = 1; a++;原创 2021-02-01 22:05:29 · 158 阅读 · 0 评论 -
箭头函数
// 箭头函数就是函数的另外一种写法. // 回顾之前函数的写法: // function fn() {} // fn(); // let fn1 = function() {} // fn1(); // (function(){})(); // 箭头函数语法: // () => {} // 箭头函数的本质就是一个匿名函数 // function() { // console.log(1234原创 2021-02-01 22:02:40 · 181 阅读 · 0 评论 -
函数中的剩余参数
// 函数中的剩余参数,是es6中的新语法 // 语法规则: ...自定义名称 // ...hehe就是剩余参数 function fn(a, b, ...hehe) { console.log(a); //1 console.log(b); //2 console.log(hehe); } fn(1, 2, 3, 4, 5);//总结: // a): 如果实参的个数少于形参的个数,则多余的形参值为u原创 2021-02-01 22:00:37 · 627 阅读 · 0 评论 -
函数中的arguments
1. 什么是arguments? arguments是函数中一个默认的伪数组对象 2. arguments 有什么用? arguments接收用户传递的实参信息 没有接触arguments之前,通过形参接收实参信息的 在函数中接收实参信息除了形参之外,还可以通过arguments来接收 3.代码演示 function fn() { //要求: // arguments固定写法,不能自定义 /...原创 2021-02-01 21:56:37 · 1619 阅读 · 0 评论 -
函数参数的默认值设置
变量如果没有赋值,那么默认值就是undefinedfunction fn(a, b) {console.log(a); //undefinedconsole.log(b); //undefined}fn(); 可以给参数设置默认值 注意: 如果没有实参,则形参的值就是设置的默认值结果 如果设置了实参,则形参的值就是实参的赋值结果 function fn(a = 'abc', b = 'bcd') { console.log(a); //原创 2021-02-01 21:53:07 · 1440 阅读 · 0 评论 -
函数的提升
注意: 只有var声明的变量才会出现变量提升,通过let和const定义的没有变量提升 函数的提升: 只要是函数就会有函数的提升 什么是函数的提升? 在程序中,当代码遇到函数的时候,先将函数的声明提升到当前作用域的开始,不包括函数的调用 function fn(){ console.log(123); } fn(); 如下代码体现了函数的提示: 函数调用 fn(); //定义函数 function f原创 2021-02-01 21:50:59 · 411 阅读 · 0 评论