JavaScript 2

函数高级

一、原型与原型链

函数的prototype
1.函数的prototype属性（图）

• 每个函数都有一个protetype属性，它默认指向一个Object空对象（即称为：原型对象）
• 原型对象中有一个属性constructor，它指向函数对象

fun.prototype.test=function()
{
console.log('test()')
}
console.log(fun.prototype)//默认指向一个Object空对象（没有我们的属性）
//可以向里面添加属性

2.给原型对象添加属性（一般都是方法）

• 作用：函数的所有实例对象自动拥有原型中的属性

console.log(Date.prototype.console.constructor===Date)
================================================================================
true

---

显式原型与隐式原型
1.每个函数function都有一个prototype，即显式原型（属性）
2.每个实例对象都有一个__proto__，称为隐式原型
3.对象的隐式原型的值为其对于构造函数的显性原型的值
4.内存结构

5.总结：

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

function Fn(){//内部语句：this.prototype={}

}
//1.每个函数function都有一个prototype,即显式原型,默认指向一个空的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__)
//给原型添加方法
Fn.prototype.test=function(){
console.log('test()')
}
//通过实例对象调用原型的方法
fn.test()
================================================================================
true

原型链
1.原型链：

• 访问一个对象的属性时，
  • 先在自身属性中查找，找到返回
  • 如果没有，再沿着__proto__这条链向上查找，找到返回
  • 如果始终没有找到，返回undefined
• 别名：隐式原型链
• 作用：查找对象的属性（方法）
  2.构造函数/原型/实体对象的关系

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

3.构造函数/原型/实体对象的关系2

function Fn(){
this.test1=function(){
console.log('test1()');
}
}
Fn.prototype.test2=function(){
console.log('Test2()')
}

var fn=new Fn()
fn.test1()
fn.test2()
console.log(fn.toString())
fn.test3()

补充；
1.函数的显型指向的对象：默认是空Object实例对象（但Object不满足）

console.log(Fn.prototype instanceof Obect)
//true

2.所有函数都是Function的实例（包含Function）

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

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

console.log(Object.prototype.__proto__)

//null

---

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

function Fn(){

}
Fn.prototype.a='xxx'
var fn1=new Fn()
console.log(fn1.a)

var fn2=new Fn()
fn2.a='ttt'
console.log(fn1.a)
//xxx

为什么Person输出为‘Bob’??

---

探索instanceof

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

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

console.log(Object instanceof Object)
//true

???

---

执行上下文

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

//全局执行上下文
console.log(a1,window.a1)
a2()
var a=3
function a2(){
console.log('a2()')
}

//函数执行上下文
function fn(a1){
console.log(a1)		//2
console.log(a2)		//undifined
a3()				//a3()
console.log(this)	//window
console.log(arguments)	//2,3	----伪数组(2,3)

var a2=3
function a3(){
console.log('a3()')
}
}
fn(2,3)

执行上下文栈

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

var a=10
var bar=function(x){
var b=5
foo(x+5)
}
var foo=function(y){
var c=5
console.log(a+c+y)
}
bar(10)
//定义先执行，能够调用函数

栈：后进先出
对列：先进先出