当前位置：首页 > article >正文

JavaScript深入浅出

article 2025/8/22 20:01:01

学习资料：《JavaScript权威指南》
MON：https://developer.mozilla.org/ZH-CN/learn/javascript
多动手实践+参与讨论

1.数据类型

js在定义变量中，无需指定类型,背后有很多的隐式转换逻辑

var num=32

可以把字符串赋值给这个变量，也是合法的

num=''this is a string"

接下来我们来看看下面的三种情况

32+32 // 数字相加 64
"32"+32 // 字符串拼接 "3232"
"32"-32 // 0 为什么会是0？下面揭晓

在这里插入图片描述

2.隐式转换

//字符串拼接
var x= ’this is my book' +11
var y= 11+ ’this is my book' "37"-7 // 30 减号（回答了上面”32“-32 //0）
"37"+7 // 377 字符串拼接

在js中，虽然说我们不用显式地去定义变量的类型，但实际上在做一些处理的时候，是根据不同的类型会有一些不同的处理的，那么我们也可以巧用这样的一些类型。

比如：
把一个变量num转换成数字就是减去数字0：num-0
把一个变量num转换成字符串，那么只要加上一个空字符串：num+"

等于== 和 严格等于 ===
1.等于==
类型相同，同===
类型不同，尝试类型转换和比较
null=undefined相等
如果一边是数字，一边是字符串
会转成数字类型
number==string 转number

1 == ”1.0“  // true

如果一边是布尔型，另一边是其他类型
那么会转成数字类型
true为1.false为0
boolean ==? 转number

1==true //true 
0==false //false

如果一边是对象，一边是数字或者字符串
那么对象会转为基本类型
new String(‘hi’) == ‘hi’ //true

"1.23" == 1.23
0 == false
num == undefined
new Object() == new Object()
[1,2] == [1,2]

2.严格等于 ===
首先会判断等号两边的类型，类型不同，返回false
类型相同：

null === null 
undefined === undefined

NaN 不等于 NaN(NaN不等于任何一个数，包括它本身)
new Object 不等于 new Object （对象的比较是用引用去比较，而不是用值去比较）

3.包装对象

var str = ''string" //undefined
var strObj = new String(''string") //undefined
str //基本类型 "string" 按道理来说应该没有属性和方法
str.length // 6
str.t = 10 //10
str.t // undefinedstrObj //对象类型 String {0:'"1"}

js隐藏机制
当一个基本类型尝试以一个对象方式去使用时，比如说访问一个length属性，或给它增加一些属性，当你做这样的操作时，js会非常智能地把这样的一个基本类型转换成对应的包装类型对象，相当于new了一个string，然后这个值和str是一样的，那么当完成这样的一个访问时，这个临时对象会被销毁掉
在这里插入图片描述

除了string外，number和boolean也是一样
在这里插入图片描述

4.类型检测

在这里插入图片描述
1.typeof(常用，适合函数对象判断和基本数据类型判断)

为什么typeof null === “object”
为了一些兼容性问题

2.instanceof （判断对象）
基于原型链去判断的一个操作符
obj instanceof Object

如果是基本类型，直接返回false
右操作数必须是一个函数对象或者说函数构造器，如果不是的话，就会抛出异常

大致原理:判断左边左操作数对象的原型链上是否有右边这个构造函数的Prototype属性
在这里插入图片描述
任何一个构造函数都有一个prototype对象属性，那么这个对象属性将用作使用new来new构造函数这样的一种方式去构造出对象的原型

注意：不同window或iframe间的对象类型检测不能使用instanceof
js是按照引用去判断对象
3.可以用Object.prototype.toString.apply
判断数组，函数，null，undefined
在这里插入图片描述
4.construcor

任何一个对象都有一个construcor属性，实际上是继承自原型的
那么这个constructor会指向构造这个对象的构造器或者说构造函数
constructor是可以被改写的，所以使用时需要小心

5.duck type 鸭子类型
在这里插入图片描述

5.表达式

表达式是指能计算出值得任何可用程序单元。–wiki
表达式是一种JS短语，可使JS解释器用来产生一个值。 --《JS权威指南》
原始表达式和运算符可以组合成复合表达式
在这里插入图片描述

6.语句、严格模式

JS程序由语句组成，语句遵守特定的语法规则。
例如：if语句，while语句，with语句等等
在这里插入图片描述
块语句 block:块语句常用于组合~多个语句。
块语句用一对花括号定义
语法：

{语句1；语句2；...语句n；
}

{var str = "hi";console.log(str)
}

实际上块语句我们很少单独使用，它常常和if一起使用

if(true){console.log('hi')}

直接以花括号开头，会被理解为块，会报语法错误
如果想让它理解为对象表达式的话，那么需要把它赋值给O，或者外面再用一个括号括起来。
在这里插入图片描述
注意：没有块级作用域

如何避免这种情况呢
中间使用逗号隔开即可

var a=1, b=1;

7.try-catch语句

try-catch提供了一个捕获异常的机制
执行流程：
1.执行try块的代码
2.如果抛出了异常，会由catch从句去捕获并执行
3.如果没有发生任何异常，catch中的代码就会被忽略掉
4.但是不管有没有异常，最后都会执行finally从句
try后面必须跟着一个catch或者finally，也就是说try-catch可以有三种形式
1.try-catch

2.try-finally
在这里插入图片描述
3.try-catch-finally(可嵌套)