尚硅谷JavaScript高级学习笔记

news2025/4/19 6:48:24

01 准备

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

02 数据类型

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

在这里插入图片描述

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

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是全局变量
}