【jS高级】：二、函数高级(1.原型与原型链 2.执行上下文与执行上下文栈 3.作用域与作用域链)

二、函数高级

1.原型与原型链

1.原型prototype

1. 函数的prototype属性(图)
   

• 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
• 原型对象中有一个属性constructor, 它指向函数对象

3. 给原型对象添加属性(一般都是方法)

• 作用: 函数的所有实例对象自动拥有原型中的属性(方法)

2.显式原型与隐式原型

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

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

3.原型链

① 原型链(图解)：

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

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

1. 所有的构造器的constructor都指向Function
2. Function的prototype指向一个特殊匿名函数，而这个特殊匿名函数的__proto__指向Object.prototype
3. 一个object对象的隐式原型（__proto__）指向了Object原型对象（其里面含有tostring等方法）
   而Object原型对象的隐式原型（__proto__）为空 null

var o1 = new Object();
var o2 = {};

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

function Foo(){  }

④.原型继承
构造函数的实例对象自动拥有构造函数原型对象的属性(方法)，利用的就是原型链

⑤.原型属性问题

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

4.探索instanceof

instanceof检测左侧的__proto__原型链上，是否存在右侧的prototype原型。

案例①：

function Foo() {  }
var f1 = new Foo();
console.log(f1 instanceof Foo); //true
console.log(f1 instanceof Object);//true

案例②：

注：判断Object构造函数和Function构造函数
    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);

5.面试题

/*
  测试题1
   */
  var A = function() {

  }
  A.prototype.n = 1

  var b = new A()

  A.prototype = {
    n: 2,
    m: 3
  }

  var c = new A()
  console.log(b.n, b.m, c.n, c.m) //1，undefined，2，3
  //考查：原型对象为引用数据类型


  /*
   测试题2
   */
  var F = function(){};
  Object.prototype.a = function(){
    console.log('a()')
  };
  Function.prototype.b = function(){
    console.log('b()')
  };
  var f = new F();
  f.a()  //a()
  f.b()  //报错：f.b is not a function 
  F.a()  //a()
  F.b()  //b()

2.执行上下文与执行上下文栈

1.变量提升与函数提升

1. 变量声明提升

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

2. 函数声明提升

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

3. 优先级
   函数提升优先级高于变量提升，且不会被同名变量声明时覆盖，但是会被变量赋值后覆盖，即提升后变量在上，函数在下
4. 问题: 变量提升和函数提升是如何产生的?
   执行上下文对数据进行的预处理操作

2.执行上下文
6. 代码分类(位置)

• 全局代码
• 函数代码

7. 全局执行上下文

• 在执行全局代码前将window确定为全局执行上下文
• 对全局数据进行预处理
  • var定义的全局变量==>undefined, 添加为window的属性
  • function声明的全局函数==>赋值(fun), 添加为window的方法
  • this==>赋值(window)
• 开始执行全局代码

8. 函数执行上下文

• 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象
• 对局部数据进行预处理
  • 形参变量==>赋值(实参)==>添加为执行上下文的属性
  • arguments==>赋值(实参列表), 添加为执行上下文的属性
  • var定义的局部变量==>undefined, 添加为执行上下文的属性
  • function声明的函数 ==>赋值(fun), 添加为执行上下文的方法
  • this==>赋值(调用函数的对象)
• 开始执行函数体代码

3.执行上下文栈

过程：

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

例：

4.面试题：

 /*
  测试题1: 
  */
  function a() {}
  var a;
  console.log(typeof a) //function


  /*
  测试题2: 
   */
  if (!(b in window)) {
    var b = 1; 
  }
  console.log(b)//undefined

  /*
  测试题3: 
   */
  var c = 1
  function c(c) {
    console.log(c)
    var c = 3
  }
  c(2)//报错: c is not a function
      //原因执行时，先提升后赋值，赋值后c=1，所以c不是一个函数

3.作用域与作用域链

1.作用域

1. 理解

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

2. 分类

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

3. 作用

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

2.作用域与执行上下文

1. 区别1

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

2. 区别2

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

3. 联系

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

3.作用域链

1. 理解

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

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

4.面试题

  var x = 10;
  function fn() {
    console.log(x);
  }
  function show(f) {
    var x = 20;
    f();
  }
  show(fn);//10
           //作用域是在函数定义时确定的，而不是在调用时确定

  var fn = function () {
    console.log(fn)
  }
  fn() //function () { console.log(fn)  }

  var obj = {
    fn2: function () {
      console.log(fn2)
    }
  }
  obj.fn2() //fn2 is not define