11-对象简介
title: 11-对象简介publish: true
对象简介面向对象简介面向对象:可以创建自定义的类型,很好的支持继承和多态。
面向对象的特征:封装、继承、多态。
对象的概念在 JavaScript 中,对象是一组无序的相关属性和方法的集合。
对象的作用是:封装信息。比如Student类里可以封装学生的姓名、年龄、成绩等。
对象具有特征(属性)和行为(方法)。
为什么需要对象保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。
比如,如果要保存一个人的信息,通过数组的方式可以这样保存:
var arr = ['王二', 35, '男', '180'];
上面这种表达方式比较乱。而如果用JS中的对象来表达,结构会更清晰。如下:
var person = {};person.name = '王二';person.age = 35;person.sex = '男';person.height = '180';
由此可见,对象里面 ...
12-基本包装类型
title: 12-基本包装类型publish: true
基本数据类型不能绑定属性和方法属性和方法只能添加给对象,不能添加给基本数据类型。
1、基本数据类型:
注意,基本数据类型string是无法绑定属性和方法的。比如说:
var str = 'qianguyihao';str.aaa = 12;console.log(typeof str); //打印结果为:stringconsole.log(str.aaa); //打印结果为:undefined
上方代码中,当我们尝试打印str.aaa的时候,会发现打印结果为:undefined。也就是说,不能给 string 绑定属性和方法。
当然,我们可以打印 str.length、str.indexOf(“m”)等等。因为这两个方法的底层做了数据类型转换(临时将 string 字符串转换为 String 对象,然后再调用内置方法),也就是我们在上一段中讲到的包装类。
2、引用数据类型:
引用数据类型String是可以绑定属性和方法的。如下:
var strObj = new String('smyhva ...
13-内置对象 String:字符串的常见方法
title: 13-基本包装类型publish: true
内置对象简介
JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象。
前面两种对象:是JS的基础内容,属于 ECMAScript; 第三个浏览器对象:属于JS独有,即 JS 内置的API。
内置对象:就是指这个语言自带的一些对象,供开发者使用,这些对象提供了一些常用或者最基本而必要的功能(属性和方法)。
内置对象最大的优点就是帮助我们快速开发。
JavaScript的内置对象:
内置对象
对象说明
Arguments
函数参数集合
Array
数组
Boolean
布尔对象
Math
数学对象
Date
日期时间
Error
异常对象
Function
函数构造器
Number
数值对象
Object
基础对象
RegExp
正则表达式对象
String
字符串对象
前面的几篇文章中,我们专门讲到了数组 Array。今天这篇文章,我们先来讲一下内置对象 Math。
字符串前言
在日常开发中,String 对象(字符串对象)的使用频率是非常 ...
14-内置对象:Number和Math
title: 14-内置对象:Number和Mathpublish: true
内置对象 Number 的常见方法Number.isInteger() 判断是否为整数语法:
布尔值 = Number.isInteger(数字);
toFixed() 小数点后面保留多少位语法:
字符串 = myNum.toFixed(num);
解释:将数字 myNum 的小数点后面保留 num 位小数(四舍五入),并返回。不会改变原数字。注意,返回结果是字符串。
参数 num:指定了小数点后面的位数。
举例:
let num = 3.456;let num2 = num.toFixed(2);console.log(num); // 打印结果:3.456console.log(num2); // 打印结果:3.46console.log(typeof num); // numberconsole.log(typeof num2); // string
上方代码中,num2的结果是3.46,但是请注意,num的类型Number型,而num2的类型却是String型。
内置对象 Math 的常 ...
15-内置对象:Date
title: 15-内置对象:Datepublish: true
内置对象:Date
Date 对象在实际开发中,使用得很频繁,且容易在细节地方出错,需要引起重视。
内置对象 Date 用来处理日期和时间。
需要注意的是:与 Math 对象不同,Date 对象是一个构造函数 ,需要先实例化后才能使用。
创建Date对象创建Date对象有两种写法:
写法一:如果Date()不写参数,就返回当前时间对象
写法二:如果Date()里面写参数,就返回括号里输入的时间对象
针对这两种写法,我们来具体讲一讲。
写法一:不传递参数时,则获取系统的当前时间对象代码举例:
var date1 = new Date();console.log(date1);console.log(typeof date1);
代码解释:不传递参数时,表示的是获取系统的当前时间对象。也可以理解成是:获取当前代码执行的时间。
打印结果:
Mon Feb 17 2020 21:57:22 GMT+0800 (中国标准时间)object
写法二:传递参数传递参数时,表示获取指定时间的时间对象。参数中既可以传递字 ...
16-数组简介
title: 16-数组简介publish: true
之前学习的数据类型,只能存储一个值(字符串也为一个值)。如果我们想存储多个值,就可以使用数组。
数组简介数组(Array)是属于内置对象,我们可以在MDN网站上查询它的各种方法。
数组和普通对象的功能类似,也是用来存储一些值的。不同的是:
普通对象是使用字符串作为属性名的,而数组是使用数字作为索引来操作元素。索引:从 0 开始的整数就是索引。
数组的存储性能比普通对象要好。在实际开发中我们经常使用数组来存储一些数据(尤其是列表数据),使用频率非常高。
比如说,上面这个页面的列表数据,它的结构就是一个大数组。
数组中的元素可以是任意的数据类型,也可以是对象,也可以是函数,也可以是数组。数组的元素中,如果存放的是数组,我们就称这种数组为二维数组。
接下来,我们讲一讲数组的基本操作。
创建数组对象方式一:使用字面量创建数组举例:
var arr1 = []; // 创建一个空的数组var arr2 = [1, 2, 3]; // 创建带初始值的数组
方式一最简单,也用得最多。
方式二:使用构造函数创建数组语法:
le ...
17-数组的常见方法
title: 17-数组的常见方法publish: true
数组的方法清单数组的类型相关
方法
描述
备注
Array.isArray()
判断是否为数组
toString()
将数组转换为字符串
Array.from(arrayLike)
将伪数组转化为真数组
Array.of(value1, value2, value3)
创建数组:将一系列值转换成数组
注意,获取数组的长度是用length属性,不是方法。关于 length属性,详见上一篇文章。
数组元素的添加和删除
方法
描述
备注
push()
向数组的最后面插入一个或多个元素,返回结果为新数组的长度
会改变原数组
pop()
删除数组中的最后一个元素,返回结果为被删除的元素
会改变原数组
unshift()
在数组最前面插入一个或多个元素,返回结果为新数组的长度
会改变原数组
shift()
删除数组中的第一个元素,返回结果为被删除的元素
会改变原数组
slice()
从数组中提取指定的一个或多个元素,返回结果为新的数组
不会改变原数组
spli ...
18-函数
title: 18-函数publish: true
前言关于函数的核心内容:
函数有哪几种定义和调用方式
this:函数内部的 this 指向、如何改变 this 的指向。
函数的严格模式
高阶函数:函数作为参数传递、函数作为返回值传递
闭包:闭包的作用
递归:递归的两个条件
深拷贝和浅拷贝的区别
函数的介绍函数:就是将一些功能或语句进行封装,在需要的时候,通过调用的形式,执行这些语句。
函数也是一个对象
使用typeof检查一个函数对象时,会返回function
函数的作用:
将大量重复的语句抽取出来,写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重复劳动。
简化编程,让编程模块化。高内聚、低耦合。
来看个例子:
console.log("你好");sayHello(); // 调用函数// 定义函数function sayHello(){ console.log("欢迎"); console.log("welcome");}
函数的定义/声明方式一:利 ...
19-作用域和变量提升
title: 19-作用域和变量提升publish: true
作用域、变量提升的知识点,面试时会经常遇到。
作用域(Scope)的概念
概念:通俗来讲,作用域是一个变量或函数的作用范围。作用域在函数定义时,就已经确定了。
目的:为了提高程序的可靠性,同时减少命名冲突。
作用域的分类在 JS 中,一共有两种作用域:(ES6 之前)
全局作用域:作用于整个 script 标签内部,或者作用域一个独立的 JS 文件。
函数作用域(局部作用域):作用于函数内的代码环境。
作用域的访问关系在内部作用域中可以访问到外部作用域的变量,在外部作用域中无法访问到内部作用域的变量。
代码举例:
var a = 'aaa';function foo() { var b = 'bbb'; console.log(a); // 打印结果:aaa。说明 内层作用域 可以访问 外层作用域 里的变量}foo();console.log(b); // 报错:Uncaught ReferenceError: b is not ...
20-预编译
title: 20-预编译publish: true
我们在上一篇文章《作用域》中简单讲过“变量提升”,今天来讲一下预编译,这对我们深入理解变量提升会有帮助。
JavaScript 运行三部曲
语法分析
预编译
解释执行
预编译前奏
在讲预编译前,我们先来普及下面两个规律。
两个规律规律1:任何变量,如果未经声明就赋值,此变量是属于 window 的属性,而且不会做变量提升。(注意,无论在哪个作用域内赋值)
比如说,如果我们直接在代码里写 console.log(a),这肯定会报错的,提示找不到 a。但如果我直接写 a = 100,这就不会报错,此时,这个 a 就是 window.a。
规律2:一切声明的全局变量,全是window的属性。(注意,我说的是在全局作用域内声明的全局变量,不是说局部变量)
比如说,当我定义 var a = 200 时,这此时这个 a 就是 window.a。
由此,我们可以看出:window 代表了全局作用域(是说「代表」,没说「等于」)。
举例掌握了上面两句话之后,我们再来看看下面的例子。
function foo() { ...
21-this指向
title: 21-this指向publish: true
执行期上下文当函数执行时(准确来说,是在函数发生预编译的前一刻),会创建一个执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境。
每调用一次函数,就会创建一个新的上下文对象,他们之间是相互独立且独一无二的。当函数执行完毕,它所产生的执行期上下文会被销毁。
参考链接:https://www.cnblogs.com/chenyingjie1207/p/9966036.html
this解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是 this,this 指向的是一个对象,这个对象我们称为函数执行的 上下文对象。
函数内 this 的指向【非常重要】我们在《JavaScript 基础/函数.md》这篇文章讲过,函数的调用有六种形式。
根据函数的调用方式的不同,this 会指向不同的对象:
1.以函数的形式(包括普通函数、定时器函数、立即执行函数)调用时,this 的指向永远都是 window。比如fun();相当于window.fun();
2.以方法的形式调用时,this 指向调用 ...
22-call、apply 和 bind
title: 22-call、apply 和 bindpublish: true
前言JS 专门为我们提供了一些方法来改变函数内部的 this 指向。常见的方法有 call()、apply()、bind() 方法。
call() 方法call() 方法的作用call() 方法的作用:可以调用一个函数,与此同时,它还可以改变这个函数内部的 this 指向。
call() 方法的另一个应用:可以实现继承。之所以能实现继承,其实是利用了上面的作用。
语法:
fn1.call(想要将this指向哪里, 函数实参1, 函数实参2);
备注:第一个参数中,如果不需要改变 this 指向,则传 null。
call() 方法举例举例 1、通过 call() 调用函数:
const obj1 = { nickName: 'qianguyihao', age: 28,};function fn1() { console.log(this); console.log(this.nickName);}fn1.call( ...
23-高阶函数
title: 23-高阶函数publish: true
高阶函数高阶函数的概念当 函数 A 接收函数 B 作为参数,或者把函数 C 作为返回值输出时,我们称 函数 A 为高阶函数。
通俗来说,高阶函数是 对其他函数进行操作 的函数。
高阶函数举例1:把其他函数作为参数function fn1(a, b, callback) { console.log(a + b); // 执行完上面的 console.log() 语句之后,再执行下面这个 callback 函数。也就是说,这个 callback 函数是最后执行的。 callback && callback();}fn1(10, 20, function () { console.log('我是最后执行的函数');});
打印结果:
30我是最后执行的函数
高阶函数举例2:把其他区函数作为返回值function fn1() { let a = 20; return function () { ...
24-闭包
title: 24-闭包publish: true
闭包的引入我们知道,变量根据作用域的不同分为两种:全局变量和局部变量。
函数内部可以访问全局变量和局部变量。
函数外部只能访问全局变量,不能访问局部变量。
当函数执行完毕,本作用域内的局部变量会销毁。
比如下面这样的代码:
function foo() { let a = 1;}foo();console.log(a); // 打印报错:Uncaught ReferenceError: a is not defined
上方代码中,由于变量 a 是函数内的局部变量,所以外部无法访问。
但是,在有些场景下,我们就是想要在函数外部访问函数内的局部变量,那要怎么办呢?这就需要引入闭包的概念。
闭包的概念和代码举例闭包的概念闭包(closure):指有权访问另一个函数作用域中变量的函数。
上面这个概念,出自《JavaScript 高级程序设计(第 3 版)》这本书。上面的概念中指出,闭包是一种函数;当然,你可以把闭包理解成是一种现象。具体解释如下。
简单理解就是:如果这个作用域可以访问另外一个函数内部 ...
25-面向对象概述
title: 25-面向对象概述publish: true
面向过程和面向对象面向过程面向过程:先分析好的具体步骤,然后按照步骤,一步步解决问题。
优点:性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程。
缺点:没有面向对象易维护、易复用、易扩展。
面向对象面向对象(OOP,Object Oriented Programming):以对象功能来划分问题,而不是步骤。
优点:易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统 更加灵活、更加易于维护。
缺点:性能比面向过程低。
面向对象的编程思想面向对象的编程思想:对代码和数据进行封装,并以对象调用的方式,对外提供统一的调用接口。
比如说,当我们在开车的时候,无需关心汽车的内部构造有多复杂,对于大多数人而言,只需要会开、知道汽车有哪些功能就行了。
面向对象的特性在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工。面向对象编程具有灵活、代码可复用、容易维护和开发的优点,适合多人合作的大型软件项目,更符合我们认识事物的规律。
面向对象的特性如下:
封装性 ...