JS 学习笔记 (七) 面向对象编程OOP
1、前言创建对象有很多种方法,最常见的是字面量创建和new Object()创建。但是在需要创建多个相同结构的对象时,这两种方法就不太方便了。 如:创建多个学生信息的对象 12345678910111213let tom = { name: "Tom", age: 20, sex: "boy", height: 175};let marry = { name: "Marry", age: 22, sex: "girl", height: 165} 2、对象工厂2.1 实例使用对象工厂改进上述代码,如: 123456789function person(name, age, sex, height) { return { name, age, sex, height }}let tom = new person("Tom", 20,...
JS 学习笔记 (六) 函数式编程
1、函数闭包1.1 概述 JavaScript采用词法作用域,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的。 为了实现这种词法作用域,JavaScript函数对象的内部状态不仅包含函数的代码逻辑,还必须引用当前的作用域链。 函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内,这种特性被称为“闭包” 从技术的角度讲,所有的JavaScript函数都是闭包:它们都是对象,它们都关联到作用域链 1.2 嵌套函数先看下面的代码: 123456789var scope = "globle scope";function checkscope() { var scope = "local scope"; function f() { return scope; } return f();}console.log(checkscope()); 12345678910var scope = "globle scope&quo...
JS学习笔记 (五) 函数进阶
1、函数基础1.1 函数的基本概念 函数是一段JavaScript代码,只被定义一次,但是可以被调用或者执行许多次。函数是一种对象,可以设置属性,或调用方法。 函数中的参数分为实参和形参。其中,形参在函数体中类似局部变量,函数调用会为形参提供实参的值。函数使用实参的值来计算返回值,成为该函数调用表达式的值。除了实参外,函数每次调用都会有一个this的值。 如果函数挂载在对象的属性上则该函数被称为对象的方法,当通过该对象调用函数时,该对象就是此时的上下文,也就是该函数的this。 用于初始化一个新创建的对象的函数称为构造函数 函数可以嵌套在其它函数上进行定义,从而可以访问它们被定义时所处的作用域中的任何变量。此时,函数就构成了一个闭包。 1.2 函数的定义方法1.2.1 函数定义构成 函数定义是由函数名称标识符、一对圆括号和一对花括号构成,如: 123function sum(a, b) { return a + b} 其中,sum是该函数的函数名,圆括号中存放啊a,b两个参数,大括号中存放JavaScript语句,构成了函数体。 ...
JS学习笔记 (四) 数组进阶
1、基本知识1、数组是值的有序集合。每个值叫做一个元素,而每个元素在数组中的位置称为索引,以数字表示,以0开始。2、数组是无类型的。数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型。数组的元素可以是对象或其它数组。3、数组是动态的,数组长度可长可短。在创建数组时无须声明一个固定的大小或者在数组大小变化时无须重新分配空间4、数组可以是稀疏的。数组元素的索引不一定是连续的,它们之间可以有空缺,每个数组都有一个length属性,针对非稀疏数组,该属性就是数组元素的个数,针对稀疏数组,length比实际元素个数要大。5、JavaScript数组是JavaScript对象的特殊形式。数组索引可以认为是整数的属性名。6、数组继承自Array.prototype中的属性。它定义了许多的方法,它们对真正的数组和类数组对象都有效。如,字符串、arguments等。 2、操作数组2.1 创建数组2.1.1 字面量创建举个例子: 1234567891011let empty = [];let arr1 = [2, 3, 5, 7, 11];let arr2 = [1.1, true...
JS学习笔记 (三) 对象进阶
1、JS对象1.1 JS对象特征1、JS对象是基本数据数据类型之一,是一种复合值,可以看成若干属性的集合。 属性是名值对的形式(key:value) 属性名是字符串,因此可以把对象看成是字符串到值的映射 2、对象除了可以保持自有的属性,还可以从一个称为原型的对象继承属性。其中,原型链继承是JavaScript的核心特征。3、对象是动态的,可以增加或删除属性。4、除了字符串、数值、true、false、null和undefined,其它值都是对象。5、对象最常见的用法是对其属性进行创建、设置、查找、删除、检测和枚举等操作。 属性值是任意JavaScript值,或者是一个getter或setter函数 每个属性还有一些与之相关的值,称为“属性特征。分别为:可写(writable attribute,表明是否可以设置属性的值)、可枚举(enumerable attribute,表明是否可以通过for/in结构返回该属性)和可配置(configurable attribute,表明是否可以删除或修改该属性)。 6、每个对象还拥有三个相关的对象特性。分别为: 对象的原型...
ES6学习笔记(十四)module的简单使用
1、前言module模块机制是es6新引入的,它解决了作用域的问题,使代码更加规范和结构化。下面简单的使用一下。 2、基本使用2.1 模块和脚本的区别 模块代码运行在严格模式下,并且没有任何办法跳出严格模式。 在模块的顶级作用域创建的变量,不会影响到全局作用域,它们只会在模块顶级作用域的内部存在。 模块顶级作用域的this值为undefined。 模块不允许在代码中使用HTML风格的注释。 模块允许到处需要外部引用的方法或变量。 模块可以从其他模块导入绑定。 2.2 几种使用方法2.2.1 导入单个(JS文件中)methods.mjs 1234function mul(num1, num2) { return num1 * num2}export { mul } test.js 12import { mul } from "./methods.mjs";console.log(mul(2, 3)); 2.2.2 导入单个(浏览器中)HTML中方式一: 12//直接通过script标签引用,注意...
ES6 学习笔记(十三)promise的简单使用
1、什么是promise在JavaScript中,我们经常会用到回调函数,而回调函数的使用让我们没法使用return,throw等关键字。JS引用promise正好解决了这个问题。promise单词意思是承诺,代表未来的某个事情或者是行为。promise是一个容器,包含了异步操作。因此我们认为promise是异步操作的解决方案。所有异步操作都可以通过promise来解决 2、了解promise上面说到promise是一个容器,那我们先在控制台打印一下。可以看到,Promise是一个构造函数,自身就有all、reject(代表失败的回调函数, 失败的操作)、resolve(代表成功的回调函数, 成功的操作)这几个于我们而言比较眼熟的方法,原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法。 2.1、promise对象的特点 Promise对象的状态不受外界影响。包含pending(进行中)、fulfilled(已成功)和rejected(已失败)三种状态。只有异步操作结果才可决定是哪种状态,其他任何操作都无法改变...
ES6 学习笔记(十二)代理器Proxy的简单使用
1、前言以前在学习react时做了个仿手机端的QQ音乐项目。当时的数据是通过proxy代理的QQ音乐数据接口,直接写在package.json里面。Proxy 对象(Proxy)是 ES6的特性,只是不太常用。 2、基本内容2.1 含义正如MDN上所说,Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。通俗的讲,Proxy是目标对象的一个代理器。即:在目标对象之前架设一层“拦截”,外界对该对象的访问都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写 2.2 语法12// 直接通过new Proxy实例一个代理对象const p = new Proxy(target, handler) 其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来表示拦截行为。 常见的拦截项属性: 属性 作用 has 拦截 in 操作。比如,你可以用它来隐藏对象上某些属性。 get 来拦截读取操作。比如当试图读取不存在的属性时,你可...
ES6 学习笔记(十一)迭代器和生成器函数
1、前言JavaScript提供了许多的方法来获取数组或者对象中的某个元素或者属性(迭代)。从以前的for循环到之后的filter、map再到后来的for…in和for…of的迭代机制。只要具有iterator接口的都可被迭代。 2、迭代器 Iterator2.1 含义迭代器(iterator)为各种数据结构,提供一个统一的、简便的访问接口,简单的说,迭代可以是数组或对象的遍历方式。它使得数据结构的成员能够按某种次序排列,如上面所说,只要部署 Iterator 接口,就可以完成遍历操作。即依次处理该数据结构的所有成员。 2.2 工作过程 首先,创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员,以此类推。 不断调用指针对象的next方法,直到它指向数据结构的结束位置 2.3 Symbol.iterator属性2.3.1 简介ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.ite...
ES6 学习笔记(十)Map的基本用法
1 基本用法Map类型是键值对的有序列表,而键和值都可以是任意类型。可以看做Python中的字典(Dictionary)类型。 1.1 创建方法Map本身是一个构造函数,用来生成Map实例,如: 1let m1 = new Map() 1.2 初始化Map构造函数可以接收一个数组作为参数,该数组的成员可以是一组表示键值对的数组。也可以是任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构。如: 1234let map = new Map([ ['name', 'zhang'], ['title', 'Author']]) 1.3 常见方法 方法 描述 set(key, value) 用于设置(添加)键值对 get(key) 通过key获取对应值 delete(value) 删除值,返回一个布尔值,表示删除是否成功 has(value) 返回一个布尔值,表示该值是否是Set实例的成员 clear() 清除所有成员,没有返回值 size 返...
