JavaScript高级--基础总结深入

最新推荐文章于 2024-09-04 20:18:34 发布

_L...

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量331

点赞数

分类专栏： JavaScript高级文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52624519/article/details/121650737

版权

JavaScript高级专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的数据类型，包括基本类型和对象类型，以及它们的区别。讲解了变量、内存和数据的关系，强调了内存生命周期和垃圾回收机制。此外，还探讨了函数的使用，特别是`this`的指向以及回调函数的概念。最后提到了IIFE（立即调用的函数表达式）及其作用。

摘要由CSDN通过智能技术生成

数据类型

分类
1. 基本(值)类型
  
  String: 任意字符串
  
  Number: 任意的数字
  
  boolean: true/false
  
  undefined: undefined
  
  null: null
2. 对象(引用)类型
  
  Object: 任意对象
  
  Function: 一种特别的对象(可以执行)
  
  Array: 一种特别的对象(数值下标, 内部数据是有序的)
判断
1. typeof:
  
  可以判断: undefined/ 数值 / 字符串 / 布尔值 / function
  
  不能判断: null与object object与array
2. instanceof:
  
  判断对象的具体类型
3. ===
  
  可以判断: undefined, null
undefined与null的区别?

undefined代表定义未赋值

nulll定义并赋值了, 只是值为null
什么时候给变量赋值为null呢?
1. 初始赋值, 表明将要赋值为对象
2. 结束前, 让对象成为垃圾对象(被垃圾回收器回收)
严格区别变量类型与数据类型（了解）
1. 数据的类型：基本类型、对象类型
2. 变量的类型（变量内存值的类型）
  
  基本类型: 保存就是基本类型的数据
  
  引用类型: 保存的是地址值

数据、变量、内存

数据

定义：存储在内存中代表特定信息的东西，本质上是0101...

特点: 可传递, 可运算

一切皆数据

内存中所有操作的目标: 数据

数据的操作：算术运算、逻辑运算、赋值、运行函数
内存

定义：内存条通电后产生的可储存数据的空间(临时的)

分类：

栈: 全局变量/局部变量

堆: 对象

内存产生和死亡: 内存条(电路版) =>通电=>产生内存空间=>存储数据=>处理数据=>断电=>内存空间和数据都消失

一块小内存的2个数据：内部存储的数据、地址值
变量

定义：可变化的量，由变量名和变量值组成

注意点：每个变量都对应一块小内存, 变量名用来查找对应的内存, 变量值就是内存中保存的数据
内存,数据, 变量三者之间的关系
1. 内存用来存储数据的空间
2. 变量是内存的标识

相关问题：

关于引用变量赋值问题

2个引用变量指向同一个对象, 通过一个变量修改对象内部数据, 另一个变量看到的是修改之后的数据

  var obj1 = {name: 'Tom'};
  var obj2 = obj1;
  obj2.age = 12;
  console.log(obj1.age);  // 12
  function fn (obj) {
    obj.name = 'A';
  };
  fn(obj1);
  console.log(obj2.name); // A

2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象

  var a = {age: 12};
  var b = a;
  a = {name: 'BOB', age: 13};	// 引用变量a指向另一个对象{name: 'BOB', age: 13}
  b.age = 14;
  console.log(b.age, a.name, a.age); // 14 Bob 13
  function fn2 (obj) {
    obj = {age: 15};
  };
  fn2(a);
  console.log(a.age);	// 13

在js调用函数时传递变量参数时, 是值传递还是引用传递

理解1: 都是值(基本/地址值)传递

理解2: 可能是值传递, 也可能是引用传递(地址值)

var a = 3;
function fn (a) {
  a = a + 1;	// 这里的a和全局变量a不同,这里的a是形参，在函数运行结束时将被释放
  console.log(a); // 4
};
fn(a);
console.log(a);  // 3（由于形参a在函数运行结束时被释放，所以这里输出的a是全局变量a）

//----------------------------------------

var a = 3;
function fn (b) {
  b = b + 1;
  console.log(b); // 4
};
fn(a);
console.log(a);  // 3
console.log(b);  // 这里会报错：b is not defined，因为b是形参，形参在函数运行结束时将被释放

JS引擎如何管理内存?
1. 内存生命周期
  
  分配小内存空间, 得到它的使用权
  
  存储数据, 可以反复进行操作
  
  释放小内存空间
2. 释放内存
  
  局部变量: 函数执行完自动释放
  
  对象: 成为垃圾对象==>垃圾回收器回收
```
  function fn () {
    var b = {};
  };
  fn(); // b是自动释放, b所指向的对象是在后面的某个时刻由垃圾回收器回收
```

对象

定义：多个数据的封装体，用来保存多个数据的容器，一个对象代表现实中的一个事物

作用：统一管理多个数据

组成：

1. 属性：属性名（字符串）和属性值（任意）组成

2. 方法：一种特别的属性（属性值是函数）

如何访问对象内部数据：

① .属性名：编码简单，有时不能用

② ['属性名']：编码麻烦，能通用

问题：什么时候必须使用 ['属性名'] 的方式？

给对象添加一个属性 content-type：text/json

p.content-type = 'text/json'; // 不能用，会报错

p['content-type'] = 'text/json'; // 能用
变量名不确定

let proName = 'myAge';

let value = 18;

p.proName = value; // 不能用，因为这里的p.proName = 'myAge'

p.[proName] = value; // 能用

函数

定义：实现特定功能的n条语句的封装体，只有函数是可以执行的，其他类型的数据不能执行

作用：

提高代码复用
便于阅读交流

如何定义函数：

函数声明

function fn1(){

console.log('fn1()');

}
表达式

let fn2 = function{

console.log('fn2()');

}

如何调用（执行）函数：

test()：直接调用
obj.test()：通过对象调用
new test()：new调用
test.call / apply(obj)：临时让test成为obj的方法进行调用，相当于obj.test()，但是不能直接用obj.test()调用，因为obj中根本就没有test方法

函数中的this

this是什么？

任何函数本质上都是通过某个对象来调用的，如果没有直接指定就是window
所有函数内部都有一个变量this
它的值是调用函数的当前对象

如何确定this的值？

test()：window
p.test()：p
new test()：新创建的对象
p.call(obj)：obj

回调函数

什么函数才是调函数？

自己定义的
自己没有调用
但最终它执行了

常见的回调函数：

dom事件回调函数

例：document.getElementById('btn').onclick = function(){

alert(this.innerHTML);

}
定时器回调函数

例：setTimeout(function(){

alert("时间到");

},2000)
ajax请求回调函数（后面讲）
生命周期回调函数（后面讲）

IIFE

全称：Immediately-Invoked Function Expression（立即调用的函数表达式）

作用：

隐藏实现
不会污染外部（全局）命名空间
用它来编码就是模块

例：

// 格式：
(function(){	// 匿名函数自调用
    代码
})();

//--------------------------------

(function (){
	let a = 1;
	function test(){
    	console.log(++a);
	}
    window.$ = function(){
        return {	// 向外暴露一个全局变量
            test:test;
        }
    }
})();
$().test();		//  2 
// 1. $是一个函数	 2. $执行后返回的是一个对象