函数高级② -- (原型链属性、instance、提升、执行上下文)
【摘要】
文章目录
原型链的属性问题instanceof变量提升与函数提升执行上下文
原型链的属性问题
读取对象的属性值时: 会自动到原型链中查找设置对象的属性值时: 不会查找原型链, 如果当前对象...
原型链的属性问题
- 读取对象的属性值时: 会自动到原型链中查找
- 设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
- 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上
从以下的例子中可以发现如上的规律:
function Fn() {
}
Fn.prototype.a = 'xxx'
var fn1 = new Fn()
console.log(fn1.a) //xxx
var fn2 = new Fn()
fn2.a = 'yyy'
console.log(fn1.a, fn2.a) //xxx yyy
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
在fn2中:
instanceof
- instanceof是如何判断的?
- 表达式: A instanceof B
- 如果B构造函数的显式原型对象(prototype)在A对象的原型链上(换句话说有交点), 返回true, 否则返回false
- Function是通过new自己产生的实例
我们可以通过以下的两个例子去理解instanceof:
①
/*
案例1
*/
function Foo() { }
var f1 = new Foo()
console.log(f1 instanceof Foo) // true
console.log(f1 instanceof Object) // true
- 1
- 2
- 3
- 4
- 5
- 6
- 7
原型链也叫做隐式原型链,所以我们的注意力要放在以__proto__为连接,以prototype为节点的线,那就是原型链。
②
/*
案例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.log(Object instanceof Foo) // false
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
变量提升与函数提升
- 变量声明提升
- 通过var定义(声明)的变量, 在定义语句之前就可以访问到
- 值: undefined
- 函数声明提升
- 通过function声明的函数, 在之前就可以直接调用
- 值: 函数定义(对象)
验证:
<script type="text/javascript">
console.log('-----')
/*
面试题 : 输出 undefined
*/
var a = 3
function fn () {
console.log(a)
var a = 4
}
fn()
console.log(b) //undefined 变量提升
fn2() //可调用 函数提升
// fn3() //不能 变量提升
var b = 3
function fn2() {
console.log('fn2()')
}
var fn3 = function () {
console.log('fn3()')
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
有一个需要的点:
var fn3 = function () {
console.log('fn3()')
}
- 1
- 2
- 3
像这样声明的函数会被当作变量提升,而不会被当作函数提升。如果想要函数提升只能使用function来声明。
执行上下文
①代码分类(位置)
- 全局代码
- 函数(局部)代码
② 全局执行上下文
- 在执行全局代码前将window确定为全局执行上下文
- 对全局数据进行预处理
- var定义的全局变量==>undefined, 添加为window的属性
- function声明的全局函数==>赋值(fun), 添加为window的方法
- this==>赋值(window)
- 开始执行全局代码
③函数执行上下文
- 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象(虚拟的, 存在于栈中的封闭区域,对外不可见)
- 对局部数据进行预处理
- 形参变量==>赋值(实参)==>添加为执行上下文的属性
- arguments==>赋值(实参列表), 添加为执行上下文的属性
- var定义的局部变量==>undefined, 添加为执行上下文的属性
- function声明的函数 ==>赋值(fun), 添加为执行上下文的方法
- this==>赋值(调用函数的对象)
- 开始执行函数体代码
文章来源: blog.csdn.net,作者:十八岁讨厌编程,版权归原作者所有,如需转载,请联系作者。
原文链接:blog.csdn.net/zyb18507175502/article/details/124211493
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)