JS高级（一）

原型与原型链

原型（prototype）

函数的prototype属性
1.每个函数都有一个prototype属性，它默认指向一个object空对象（即称为：原型对象）
2. 原型对象都有一个属性constructor，它指向函数对象
给原型对象添加属性（一般是添加方法）
作用：函数的所有实例对象自动拥有原型中的属性（方法）

显示原型与隐式原型

1.每个函数function都有一个prototype，即显示原型
2.每个实例对象都有一个__proto__,可称为隐式原型
3.对象的隐式原型的值为其对应构造函数的显示原型的值

function Fn() {//内部语句：this.prototype={}
}
//1.每个函数function都有一个prototyp，即显示原型,默认指向空的object对象
console.log(Fn.prototype)
//2.每个实例对象都有一个__proto__,称为隐式原型
var fn = new Fn()//内部语句：this.__proto__=Fn.prototype
console.log(fn.__proto__)
//3.对象的隐式原型的值为其对应构造函数的显示原型的值
console.log(Fn.prototype===fn.__proto__)//true
//给原型添加方法
Fn.prototype.test = function () {
   console.log('test()')
}
fn.test()

4.内存结构

5.总结：
*函数的prototype属性：在定义函数时自动添加的，默认值是一个空object对象
*对象的__proto__属性：创建对象时自动添加的，默认值为构造函数的prototype属性值
*程序员能直接操作显式原型，但不能直接操作隐式原型（ES6之前）

原型链

1.原型链
访问一个对象的属性时，
–先沿着自身属性中查找，找到返回
–如果没有，再沿着__proto__这条链向上查找，找到返回
–如果最终没找到，返回undefined
别名：隐式原型链
作用：查找对象的属性（方法）

所有实例对象的隐式原型等于function的显式原型

函数的显式原型指向的对象默认是空object实例对象（但object不满足）

console.log(Fn.prototype instanceof Object)  //true
console.log(Object.prototype instanceof Object)  //false
console.log(Function.prototype instanceof Object)  //true

所有函数都是Function的实例（包含Function）
Function的显式原型等于其隐式原型

console.log(Function.__proto__===Function.prototype)  //true

Object的原型对象是原型链尽头

console.log(Object.prototype.__proto__)  //null

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

function Person(name, age) {
	this.name = name
	this.age = age
}
Person.prototype.setName = function (name){
	this.name = name
}
var p1 = new Person('Tom', 12)
p1.setName('Bob')
console.log(p1) 

var p2 = new Person('Jack', 12)
p2.setName('Cat')
console.log(p2) 

console.log(p1.__proto__===p2.__proto__)//true

探索instanceof

1.instanceof是如何判断的？
–表达式：A instanceof B
–如果B函数的显式原型对象在A对象的原型链上，返回true，否则返回false
2.Function是通过new自己产生的实例

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

function A () {
}
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

function F (){}
Object.prototype.a = function(){
	console.log('a()')
}
Function.prototype.b = function(){
	console.log('b()')
}
var f = new F()
f.a()//a()
f.b()//undefined
F.a()//a()
F.b() //b()

执行上下文与执行上下文栈

变量提升与函数提升

1.变量声明提升（先与函数）
–通过var定义（声明）的变量，在定义语句之前就可以访问到
–值：undfined

2.函数声明提升
–通过function声明的函数，在之前就可以直接调用
–值：函数定义（对象）

3.问题：变量提升和函数提升是如何产生的？

执行上下文

1.代码分类（位置）
–全局代码
–函数代码
2.全局执行上下文
–在执行全局代码前将window确定为全局执行上下文
–对全局数据进行预处理（添加为window的方法或属性）
–var定义的全局变量
–函数声明定义的函数
–this =》赋值（window）
–开始执行全局代码
3.函数执行上下文
–在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象（虚拟的，存在于栈中）
–对局部数据进行预处理
–形参变量 =》赋值（实参）=》添加为执行上下文的属性
–arguments =》赋值（实参列表），添加为执行上下文的属性
–var定义的局部变量 =》undefined , 添加为执行上下文的属性
–function声明的函数 =》赋值（fun），添加为执行上下文的方法
–this =》赋值（调用函数的对象）
–开始执行函数体代码

//1.进入全局执行上下文
var a = 10
var bar = function (x) {
	var b = 5
	foo(x + b)         //3.进入foo执行上下文
}
var foo = function (y) {
	var c = 5
	console.log (a + c + y)
}
bar(10)                //2.进入bar函数执行上下文

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

题

依次输出：
globel begin: undefined
foo() begin: 1
foo() begin: 2
foo() begin: 3
foo() end: 3
foo() end: 2
foo() end: 1
global end: 1
整个过程产生5个执行上下文

console.log('globel begin:'+ i)//undefined
var i=1
foo(1)
function foo(i){
	if (i == 4) {
		return;
	}
	console.log('foo() begin:' + i)//1
	foo(i + 1);//递归调用：在函数内部调用自己
	console.log('foo() end:' + i)
}
console.log('global end:' + i)

测试题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)//2
}
c(2)//报错：c不是一个函数
/*实际执行顺序
var c
function c(c){
	console.log(c)
}
c = 1
c(2)
*/