目录
显式原型和隐式原型
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>