函数高级② -- (原型链属性、instance、提升、执行上下文)

文章目录

原型链的属性问题

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

从以下的例子中可以发现如上的规律：

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

在fn2中：

instanceof

1. instanceof是如何判断的?

• 表达式: A instanceof B
• 如果B构造函数的显式原型对象(prototype)在A对象的原型链上(换句话说有交点), 返回true, 否则返回false

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

我们可以通过以下的两个例子去理解instanceof：
①

/*
  案例1
   */
  function Foo() {  }
  var f1 = new Foo()
  console.log(f1 instanceof Foo) // true
  console.log(f1 instanceof Object) // true

原型链也叫做隐式原型链，所以我们的注意力要放在以__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. 变量声明提升

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

2. 函数声明提升

• 通过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>

有一个需要的点：

var fn3 = function () {
    console.log('fn3()')
  }

像这样声明的函数会被当作变量提升，而不会被当作函数提升。如果想要函数提升只能使用function来声明。

执行上下文

①代码分类(位置)

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

② 全局执行上下文

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

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

• 开始执行全局代码

③函数执行上下文

• 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象(虚拟的, 存在于栈中的封闭区域，对外不可见)
• 对局部数据进行预处理

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

• 开始执行函数体代码