JavaScript
文章平均质量分 59
1oneLee
这个作者很懒,什么都没留下…
展开
-
执行上下文
JS 执行上下文先看个小例子function fn(){ console.log(a);//undefined; var a = 1;}fn();为什么打印出来的是 undefined 呢?执行上下文概念当代码运行时,会产生一个对应的执行环境,在这个环境中,所有变量会被事先提出来(变量提升),有的直接赋值,有的为默认值 undefined,代码从上往下开始执行,就叫做执行上下文。在 JavaScript 的世界里,运行环境有三种,分别是:1.全局环境:代码首先进入原创 2021-08-31 13:35:05 · 81 阅读 · 0 评论 -
让人费解的 GO 和 AO
让人费解的 GO 和 AO引言今天得空再来写一篇文章,本篇要讲解的内容是关于 函数基础 ,一起来探索一下吧。仰望星空的人,不应该被嘲笑函数基础函数种类、字面量开门见山,下面代码会输出什么,不知道小伙伴平常有咩有想过这类问题var test = function test1() { var a = 1; console.log(a);}test()test1()答案是 1 和 报错,报错信息如下:这是为什么呢?实际上,我们申明了一个变量 test,把这个函数 tes原创 2021-02-08 15:58:56 · 205 阅读 · 0 评论 -
深度剖析JavaScript ES5/ AMD/ CMD/ COMMONJS/ ES6模块化(加薪必备)
深度剖析JavaScript ES5/AMD/CMD/COMMONJS/ES6模块化(加薪必备)前言前端模块化是一个有年代的知识,每次笔试面试遇到答的不是很好,现在整理一下相关知识,进行知识梳理,如若有帮助到您,请一键三连,当然,本文表述有问题的地方,欢迎读者指正,谢谢~CommonJSCommonJS 出现就是解决原本 js 文件引入出现的不足点,即 模块依赖 和 全局污染 问题。它并不是一个 JS语言啥的,而是对于模块化的一个规范。CommonJS 实际上就是用了 require 这个玩原创 2021-02-08 15:47:29 · 321 阅读 · 0 评论 -
JavaScript模块化
深度剖析:JavaScript ES5/AMD/CMD/COMMONJS/ES6模块化,提升对前端模块化历程每个阶段的理解与掌握原创 2021-02-08 12:35:38 · 80 阅读 · 0 评论 -
原生JS模拟实现new
原生JS模拟实现 newJavaScript通过new的模拟实现,揭开使用new获得构造函数实例的真相new一句话介绍 new:new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一也许有点难懂,我们在模拟 new 之前,先看看 new 实现了哪些功能。举个例子:function Person (name, age) { this.name = name; this.age = age; this.habit = 'Games';}原创 2021-02-07 14:31:31 · 169 阅读 · 1 评论 -
原生JS重写Function.prototype.bind( )方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> Fu原创 2021-02-07 13:48:10 · 318 阅读 · 0 评论 -
重写Function.prototype.apply()方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> /*原创 2021-02-07 11:34:09 · 254 阅读 · 0 评论 -
用原生JS实现简单选项卡
学习笔记链接:1. 文件结构2. 样式文件:index.css.tab { width: 500; height: 500px; margin: 50px auto; border: 1px solid #000;}.tab .nav { height: 50px; border-bottom: 1px solid #000;}.tab .nav-item { float: left; width: 33.33%; height: 100%; te原创 2021-02-07 09:27:53 · 118 阅读 · 0 评论 -
圣杯模式来实现对象继承(企业级的继承方式)
/* * function: inherit -> 通过圣杯模式来实现继承 * params: * Target:继承的对象 * Origin: 被继承的对象 */ function inherit(Target, Origin) { // careate a buffer function function Buffer() {} // let the prototype of Buffer point to the i原创 2021-02-01 10:20:08 · 160 阅读 · 0 评论 -
JavaScript之call和apply的模拟实现
JavaScript之call和apply的模拟实现通过call和apply的模拟实现,揭开call和apply改变this的真相call一句话介绍 call:call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。举个例子:var foo = { value: 1};function bar() { console.log(this.value);}bar.call(foo); // 1注意两点:call 改变原创 2021-01-25 17:22:18 · 77 阅读 · 0 评论 -
异步加载图片函数封装(使用Promise)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script>原创 2020-12-27 22:14:31 · 483 阅读 · 0 评论 -
继承(JavaScript高级程序设计第六章核心知识笔记(二))
继承6.3.1 原型链原型链作为继承的主要方法:基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法 function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return this.property; }; fu原创 2020-12-25 22:46:19 · 139 阅读 · 1 评论 -
面向对象的程序设计(创建对象——JavaScript高级程序设计(一))
目录面向对象的程序设计6.1 理解对象6.1.1 属性类型6.1.2 定义多个属性6.1.3 读取属性的特性6.2 创建对象6.2.1 工厂模式6.2.2 构造函数模式6.2.3 原型模式面向对象的程序设计6.1 理解对象创建对象var person = new Objectperson.name = "Tom"person.age = 29person.job = "SOftware Engineer"person.sayName = function(){ alert(this.原创 2020-12-24 23:41:41 · 91 阅读 · 0 评论 -
防抖与节流函数的封装
1. 防抖我们在平时开发的时候,会有很多的场景会频繁触发事件,比如说搜索框实时发送请求。oumousemove、resize、onscroll等等,有些时候我们并不想频繁触发事件,咋办呢?这个时候我们就可以用到函数的防抖和节流了。1. 直接使用underscore.js来实现这些功能。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie原创 2020-12-16 22:21:25 · 363 阅读 · 0 评论 -
JS中的call()方法和apply()方法用法总结
JS中的call()方法和apply()方法用法总结最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧。1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法。**2. 相同点:**这两个方法的作用是一样的。都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。一般来说,this总是指向调用某个方法的对象,但是使用call()和ap转载 2020-12-16 19:33:10 · 96 阅读 · 1 评论 -
JavaScript闭包
JavaScript闭包一、获取局部作用域的变量通过变量向外传递。通过函数向外传递。条件和循环体:{}不代表作用域,在es6语法中,{}会被看做代码块,此时在{}当中声明一个函数,相当于var声明,尽量不要在{}当中声明函数,否则调用的时候会有问题。// 通过变量 向外传递 var b = '';function fn1(){ var a = "月薪10w"; b = a;}fn1();alert(b); //取到函数内局部作用域的变量a的值// 通过函数传参获取原创 2020-12-13 22:43:00 · 70 阅读 · 0 评论 -
数组遍历的几种方法及用法
来源:转载 [链接:](https://blog.csdn.net/weixin_42733155/article/details/81145334) (后续编辑更新,这是我后面重写的一篇文章,关于数组的遍历方法和使用场景介绍的更加详细一点,地址戳我 ,有兴趣的可以看看。) js提供了多种遍历数组的方法,具体使用场景略有区别,在此简单介绍一下。 一、forEach方法 fo.转载 2020-11-26 11:15:02 · 658 阅读 · 1 评论 -
数组相关的一些知识汇总
1. 数组降维1.1 二维数组降维<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>原创 2020-11-26 11:04:08 · 58 阅读 · 0 评论 -
Ajax基础到实战(七)——Todo List 案例
1.需要实现的目标功能: Todo List我们可以在文本框中输入代办的事项,点击回车键就可以添加待办事项,双击代办事项可以实现修改功能,点击待办事项前的小圆圈可以实现将状态设置为已完成状态,点击待办事项后面的叉叉可以删除本条待办事项。2. 为 todo 数据库添加账号使用 mongo 命令进入 mongodb数据库使用 use admin 命令进入 admin数据库中使用db.auth( ‘root’, ‘root’ ) 命令登录数据库使用use todo 命令 切换到todo数据库使用原创 2020-11-22 19:20:08 · 286 阅读 · 0 评论 -
原型与继承
原型与继承1. 初识原型let arr = ['yuanxing'] console.log(arr) // Array(1) console.log(arr.__proto__) // Array(0) console.log(arr.__proto__.__proto__) // Object let obj = {} console.log(obj) // Object console.log(obj.__proto__) /原创 2020-09-12 19:02:28 · 111 阅读 · 0 评论 -
JSON
JSONjson 是一种轻量级的数据交换格式,易于人阅读和编写。使用json 数据格式是替换 xml 的最佳方式,主流语言都很好的支持json 格式。所以 json 也是前后台传输数据的主要格式。json 标准中要求使用双引号包裹属性,虽然有些语言不强制,但使用双引号可避免多程序间传输发生错误语言错误的发生。声明定义基本结构let json = { "name": "zb", "url": "www.baidu.com", "school": { "name": "cuc"原创 2020-09-12 16:21:12 · 82 阅读 · 0 评论 -
利用函数递归来实现深拷贝
利用函数递归来实现深拷贝<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>原创 2020-09-10 19:33:48 · 426 阅读 · 0 评论 -
ES6 新增语法
1. letlet关键字就是用来声明变量的使用let关键字声明的变量具有块级作用域在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的防止循环变量变成全局变量使用let关键字声明的变量没有变量提升使用let关键字声明的变量具有暂时性死区特性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用let关原创 2020-09-04 15:19:50 · 131 阅读 · 0 评论 -
函数进阶
1. 函数的定义和调用1.1 函数的定义方式函数声明方式 function 关键字 (命名函数)函数表达式 (匿名函数)new Function()var fn = new Function(‘参数1’, ‘参数2’, …, ‘函数体’)Function 里面参数必须是字符串格式第三种方式执行效率低,书写不方便,较少使用所有函数都是 Function 的实例(对象)函数也属于对象<!DOCTYPE html><html lang="en">原创 2020-09-02 18:46:04 · 147 阅读 · 0 评论 -
ES6 新增方法(后期还会继续补充)
1. ES6 中的新增方法ES6 之前通过 构造函数+ 原型实现面向对象 编程(1) 构造函数有原型对象prototype(2) 构造函数原型对象prototype 里面有constructor 指向构造函数本身(3) 构造函数可以通过原型对象添加方法(4) 构造函数创建的实例对象有__proto__ 原型指向 构造函数的原型对象ES6 通过 类 实现面向对象编程<!DOCTYPE html><html lang="en"><head> &原创 2020-09-02 11:27:49 · 113 阅读 · 0 评论 -
继承
继承1. call( )调用这个函数,并且修改函数运行是的 this 指向fun.call (thisArg, arg1, arg2, …)this.Arg:当前调用函数 this 的指向对象arg1,arg2: 传递的其他参数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt原创 2020-09-01 19:32:33 · 115 阅读 · 0 评论 -
构造函数和原型(结合例子,详细!)
构造函数和原型1.1 概述在典型的OOP的语言中(如Java),都存在类的概念,类就是对象的模板,对象就是类的实例,但在ES6之前,JS中并没有引入类的概念。ES6,全称ECMAScript 6.0,2015年6月发版。但是目前浏览器的JavaScript是ES5版本,大多数高版本的浏览器也支持ES6,不过只实现了ES6的部分功能和特性。在ES6之前,对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和它们的特性。创建对象可以通过以下三种方式:1. 对象字面量2. new Obj原创 2020-09-01 14:05:11 · 1471 阅读 · 3 评论 -
ES6中类与对象三个注意点
ES6中类与对象三个注意点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>原创 2020-09-01 10:58:07 · 163 阅读 · 0 评论