本文链接：https://blog.csdn.net/m0_66506641/article/details/123796756

显式原型和隐式原型

原型链

1.原型链

显式原型和隐式原型

1.每个函数function 都有一个prototype，即显式原型
2.每个实例对象都有一个__ proto__，可称为隐式原型
3.对象的隐式原型的值为其对应构造函数的显式原型的值
4.内存结构

5.总结:

函数的prototype属性: 在定义函数时自动添加的，默认值是-一个空bject对象
对象的__ .proto__ 属性: 创建对象时自动添加的，默认值为构造函数的prototype属性值
程序员能直接操作显式原型，但不能直接操作隐式原型(ES6之前)

原型链

1.原型链

访问一个对象的属性时,先在自身属性中查找，找到返回如果没有，再沿着_ _proto___ 这条链向上查找，找到返回；如果最终没找到，返回undefined
别名:隐式原型链
作用:查找对象的属性(方法)

2.构造函数/ 原型/实体对象的关系(图解)

3.构造函数/原型/实体对象的关系2(图解)

原型链的补充

1.函数的显示原型指向的对象默认是空0bject实例对象(但0bject不满足)

console.log( Fn. prototype instanceof Object) // true
console. log(0bject. prototype instanceof Object) // faLse
console .1og( Function . prototype instanceof Object) // true

2.所有函数都是Function的实例(包含Function)
console.1og(Function._ _proto__ ===Function. prototype )

3.object的原型对象是原型链尽头
console.1og(Object. prototype.__ proto__ ) // nuLL

原型链的属性

1.读取对象的属性值时:会自动到原型链中查找
2.设置对象的属性值时:不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
3.方法一般定义在原型中，属性一般通过构造函数定义在对象本身上

探索instanceof

1. instanceof是如何判断的?

表达式: A （实例对象）instanceof B（构造函数）
如果B函数的显式原型对象在A对象的原型链上，返回true, 否则返回false

2. Function是通过new自己产生的实例

<script type="text/javascript">
function Foo() { }
varf1=newFoo()
console.log(f1 instanceof Foo) // true
console.log(f1 instanceof Object) // true

案例2
console.log(Object instanceof Function) // true
console.log(Object instanceof Object) // true
console.log( Function instanceof Function) // true 
console.log(Function instanceof Object) // true
function Foo() {}
console.1og(0bject instanceof Foo) // faLse
</script>

面试题

执行上下文和执行上下文栈

1、变量提升和函数提升

1.变量声明提升

通过var定义(声明)的变量，在定义语句之前就可以访问到
值: undefined

2.函数声明提升

通过function声明的函数，在之前就可以直接调用
值:函数定义(对象)

2、执行上下文

1.代码分类

全局代码
函数(局部)代码

2.全局执行上下文

在执行全局代码前将window确定为全局执行上下文
对全局数据进行预处理

1） var定义的全局变量==>undefined, 添加为window的属性
2）function声明的全局函数=>赋值(fun),添加为window的方法
3） this==> 赋值(window)

开始执行全局代码

3.函数执行上下文

在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象
对局部数据进行预处理

1）形参变量==>赋值(实参)==>添加为执行上下文的属性
2） arguments==>賦值(实参列表)，添加为执行上下文的属性
3） var定义的局部变量==>undefined,添加为执行上下文的属性
4） function声明的函数==> 賦值(fun),添加为执行上下文的方法
5）this==>赋值(调用函数的对象)

开始执行函数体代码

3、执行上下文栈

1.在全局代码执行前，JS 引擎就会创建一个栈来存储管理所有的执行上下文对象
2.在全局执行上下文(window)确定后，将其添加到栈中(压栈)
3.在函数执行上下文创建后，将其添加到栈中(压栈)
4.在当前函数执行完后，将栈顶的对象移除(出栈)
5.当所有的代码执行完后，栈中只剩下window

4、面试题

<script type= "text/javascript">
console.1og('gb: '+ i)
var i=1
foo(1)

function foo(i) {

if(i==4) {
return
}
console.1og('fb:' + i)
foo(i + 1) //递归调用:在函数内部调用自己
console.1og('fe:' + i)
}
console.1og('ge: ' + i)
</script>

//1.依次输出
fb：1
fb：2
fb：3
fe：3
fe：2
fe：1
2.一共产生了5次执行上下文

作用域和作用域链

1、作用域

1.理解

就是一块"地盘”，一个代码段所在的区域
它是静态的(相对于上下文对象)，在编写代码时就确定了

2.分类

全局作用域
函数作用域
没有块作用域(ES6有了)

3.作用

隔离变量，不同作用域下同名变量不会有冲突

2、作用域和执行上下文

1.区别1

全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时
全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建
函数执行上下文是在调用函数的I函数体代码执行之前创建

2.区别2

作用域是静态的，只要函数定义好了就一直存在，且不会再变化
执行上下文是动态的，调用函数时创建，函数调用结束时上下文环境就会被自动释放

3.联系

上下文环境(对象)是从属于所在的作用域
全局上下文环境==>全局作用域
函数上下文环境==>对应的函数使用域

3、作用域链

1. 理解

多个上下级关系的作用域形成的链，它的方向是从下向上的(从内到外)
查找变量时就是沿着作用域链来查找的

2.查找一个变量的查找规则

在当前作用域下的执行上下文中查找对应的属性，如果有直接返回，否则进入2
在上一级作用域的执行上下文中查找对应的属性，如果有直接返回，否则进入3
再次执行2的相同操作，直到全局作用域，如果还找不到就抛出找不到的异常

<script type= "text/javascript">
var a=1
function fn1() {
var b=2
function fn2() {
var c=3
console.log(c)
console.log(b)
console.log(a)
console.log(d)
}
fn2()
}
fn1()
</script>

4、面试题

<script type="text/javascript" >
var x=10;
function fn() {
console.1og(x);
}
function show(f) {
var x=20;
f();
}
show(fn);
</script>
//输出x=10

<script type="text/javascript">
var fn = function () {
console.1og(fn)
}
fn()
var obj={
fn2: function () {
console .1og(fn2)//报错
//console .1og(this.fn2)可以找到
}
obj.fn2()
</script>