尚硅谷JavaScript高级学习笔记

本文详细介绍了JavaScript中的函数、数据类型、原型、原型链、实例对象与原型对象的关系,以及闭包的概念、内存管理(内存溢出和内存泄漏)和对象创建模式,涵盖了构造函数、原型链继承和闭包在实践中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

01 准备

JavaScript中函数是对象。我们后续描述构造函数的内存模型时,会将构造函数称为构造函数对象。

02 数据类型

typeof 运算符来查看值的类型,它返回的是类型的字符串值

console.log(1, typeof "");// 1 'string'
console.log(2, typeof 1);// 2 'number'
console.log(3, typeof true);//3 'boolean'
console.log(4, typeof a);// 4 'undefined'
console.log(5, typeof null);//5 'object'
console.log(6, typeof new Function());// 6 'function'
console.log(7, typeof [1, 2]);// 7 'object'

在JavaScript中,typeof 操作符用于确定一个变量的类型。然而,typeof 对于数组和 null 的处理有些特殊:

  • 对于数组,尽管在内部数组是对象的一种特殊形式,但 typeof 数组会返回 ‘object’ 而不是 ‘array’。
  • 对于 null,typeof 会返回 ‘object’,这是一个已知的历史遗留问题。

这是因为JavaScript在最初的设计中没有原生的数组类型;数组是以对象的形式实现的。当 typeof 操作符被添加到语言中时,它只能返回几种预定义的类型(string、number、boolean、function、object、undefined),并且没有为数组提供专门的类型。因此,数组被归类为 ‘object’ 类型。

要正确地检查一个变量是否是数组,你应该使用 Array.isArray() 方法,这个方法在ES5中被引入,专门用于此目的。例如:

const myArray = [1, 2];
console.log(Array.isArray(myArray)); // true

在这里插入图片描述
在这里插入图片描述

== 会做数据转换
在这里插入图片描述
在这里插入图片描述

03 相关问题

在这里插入图片描述

04数据_变量_内存

在这里插入图片描述
在这里插入图片描述

05相关问题1

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

06相关问题2

07对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

08函数

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

09回调函数

在这里插入图片描述

在这里插入图片描述

10 lIFE

在这里插入图片描述
在这里插入图片描述

11 函数中的this

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

12 关于语句分号问题

在这里插入图片描述

13 webstorm设置

14 复习

15、函数的prototype

在这里插入图片描述

function Func() { }
console.log(Func);
console.log(Func.prototype);

输出:
在这里插入图片描述
每个函数都有一个prototype属性,它默认指向一个0bject空对象(即称为:原型对象)

function Func() { }
console.log(Func.prototype.constructor === Func);// true
console.log(Date.prototype.constructor === Date);// true

在这里插入图片描述
给原型对象添加属性、方法,函数的所有实例对象自动拥有原型中的属性(方法)

function Func() { }
Func.prototype.name = "LCM";
Func.prototype.hello = function(){
    console.log("hello world!");
}
let f =  new Func();
console.log(f.name);//LCM
console.log(f.hello());//hello world!

16、显式原型和隐式原型

在这里插入图片描述

       function Fun(){}
       console.log(Fun.prototype);

       let f = new Fun();
       console.log(f.__proto__);

       console.log(Fun.prototype === f.__proto__);

在这里插入图片描述
__proto__prototype中保存的都是原型对象的地址值。

Fun的prototype、f的__proto__属性什么时候加的?
JavaScript引擎在解析Fun代码的时候就创建了(内部代码应该是:this.prototype={});
f的__proto__在new创建对象的时候加的(this.proto = Fun.prototype )
在这里插入图片描述

17、原型链

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
⭐️⭐️⭐️⭐️⭐️ 记住:实例对象的隐式原型等于构造函数的显式原型;

所有函数对象的隐式原型都是一样的,都是Function对象的原型对象,因为都是new Function产生的();

⭐️⭐️⭐️⭐️⭐️特殊:Function对象的隐式原型和显式原型是同一个

Object构造函数对象的隐式原型也是Function的显式原型。也就是说Object的构造函数对象也是new Funtion()创建的。

在这里插入图片描述

18 原型链-补充

在这里插入图片描述

19 原型链属性问题

在这里插入图片描述

20 探索instanceof

在这里插入图片描述
instanceof的作用:左面对象是不是右面构造函数对象的实例
在这里插入图片描述

21 原型- 面试题

题1

在这里插入图片描述

题2

function Foo() { }

Object.prototype.f1 = function () {
    console.log("f1()");
}
Object.prototype.f2 = function () {
    console.log("f2()");
}

let f = new Foo();
f.f1();// => f1()
f.f2();// => f1()

Foo.f1();// => f1()
Foo.f2();// => f1()

22 变量提升与函数提升

在这里插入图片描述

22.1 变量提升

var a = 3;
function fn() {
    console.log(a);// undefined
    var a = 4;
}
fn();

输出undefined,因为上面代码会转化为下面的代码,变量做了提升

var a = 3;
function fn() {
	var a;
    console.log(a);// undefined
    a = 4;
}
fn();

22.1函数提升

23 执行上下文

在这里插入图片描述

⭐️⭐️⭐️⭐️⭐️
执行第一行代码前,JavaScript已经准备好了全局上下文,并已经在window对象中添加了属性和方法。注意:此时还没有给对象赋值,方法

23.1 全局执行上下文

在这里插入图片描述

23.2 函数执行上下文

在这里插入图片描述

调用函数时

第1步:在准备执行函数体之前,会在调用栈创建一个栈帧压入调用栈中。一个函数对应一个栈帧

第2步:对局部数据进行预处理
(1)形參变量==>赋值(实参)>添加为执行上下文的属性
(2)arguments
>赋值(实参列表),添加为执行上下文的属性
(3)var定义的局部变量==>undefined,添加为执行上下文的属性
(4)function声明的函数 >赋值(fun),添加为执行上下文的方法水
(5)this
>赋值(调用函数的对象)

第3步:开始执行函数体代码
在这里插入图片描述

24 执行上下文栈

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

25 面试题

26 复习

27 作用域与作用域链

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
自己的作用找不到就向上面的作用域找,一直找到最顶层-全局上下文中。

作用域链

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

28作用域_面试题

在这里插入图片描述
在这里插入图片描述

29 循环遍历加监听

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

 /* 闭包 */
for (let i = 0; i < buttons.length; i++) {
    (function (i) {//这里的i是局部变量
        buttons[i].onclick = function () {
            alert("第" + (i + 1) + "按钮")
        }
    })(i)// 这里的i是全局变量
}

30 闭包理解

在这里插入图片描述
什么时候产生闭包,外部函数调用时,包含外部函数数据的内部函数被解析了,此时会产生闭包。

31 常见的闭包

在这里插入图片描述

32 闭包的作用

在这里插入图片描述

33 闭包的生命周期

在这里插入图片描述

在这里插入图片描述

34 [闭包,应用_自定义JS模块

在这里插入图片描述

(1)方式1

在这里插入图片描述
在这里插入图片描述

(2)方式2

在这里插入图片描述

34-1 闭包的缺点-内存溢出和内存泄漏

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

35 内存溢出与内存泄露

在这里插入图片描述
在这里插入图片描述

36 面试题

题1

在这里插入图片描述

题2

在这里插入图片描述

37 对象创建模式

(1)Object构造函数模式

在这里插入图片描述

(2)对象字面量模式

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(5)

在这里插入图片描述

38 原型链继承

(1) 原型链继承

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

39 组合继承

(2)借用构造函数

在这里插入图片描述
在这里插入图片描述

(3)原型链 + 借用构造函数

在这里插入图片描述

在这里插入图片描述

40 复习

41 闭包终极面试题

42 进程与线程

43 浏览器内核

在这里插入图片描述
在这里插入图片描述

44 定时器引发的思考

在这里插入图片描述
在这里插入图片描述

45 js是单线程执行的

在这里插入图片描述

46 事件循环模型

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

47 H5 web Workers多线程

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

48 复习

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

java硕哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值