原型(prototype)
函数的prototype属性
每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象) 原型对象中有一个属性constructor, 它指向函数对象
给原型对象添加属性(一般都是方法)
作用: 函数的所有实例对象自动拥有原型中的属性(方法)
显式原型与隐式原型
每个函数function都有一个prototype,即显式原型(属性) 每个实例对象都有一个__proto__,可称为隐式原型(属性) 对象的隐式原型的值为其对应构造函数的显式原型的值 内存结构(图) 总结:
函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象 对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值 程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)
原型链
原型链(图解)
访问一个对象的属性时,
先在自身属性中查找,找到返回 如果没有, 再沿着__proto__这条链向上查找, 找到返回 如果最终没找到, 返回undefined 别名: 隐式原型链 作用: 查找对象的属性(方法)
构造函数/原型/实体对象的关系(图解) 构造函数/原型/实体对象的关系2(图解)
console. log ( Object . prototype. __proto__)
function Fn ( ) {
this . test1 = function ( ) {
console. log ( 'test1()' )
}
}
console. log ( Fn . prototype)
Fn . prototype. test2 = function ( ) {
console. log ( 'test2()' )
}
var fn = new Fn ( )
fn. test1 ( )
fn. test2 ( )
console. log ( fn. toString ( ) )
console. log ( fn. test3)
console. log ( Fn . prototype instanceof Object )
console. log ( Object . prototype instanceof Object )
console. log ( Function . prototype instanceof Object )
console. log ( Function. __proto__=== Function . prototype)
console. log ( Object . prototype. __proto__)
instanceof
instanceof是如何判断的?
表达式: A instanceof B 如果B函数的显式原型对象在A对象的原型链上, 返回true, 否则返回false
Function是通过new自己产生的实例
function Foo ( ) { }
var f1 = new Foo ( )
console. log ( f1 instanceof Foo )
console. log ( f1 instanceof Object )
console. log ( Object instanceof Function )
console. log ( Object instanceof Object )
console. log ( Function instanceof Function )
console. log ( Function instanceof Object )
function Foo ( ) { }
console. log ( Object instanceof Foo )
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)
function F ( ) { }
Object . prototype. a = function ( ) {
console. log ( 'a()' )
}
Function . prototype. b = function ( ) {
console. log ( 'b()' )
}
var f = new F ( )
f. a ( )
f. b ( )
F . a ( )
F . b ( )
变量提升与函数提升
1. 变量声明提升
通过var定义(声明)的变量, 在定义语句之前就可以访问到 值: undefined
2. 函数声明提升
通过function声明的函数, 在之前就可以直接调用 值: 函数定义(对象)
var a = 3
function fn ( ) {
console. log ( a)
var a = 4
}
fn ( )
console. log ( b)
fn2 ( )
var b = 3
function fn2 ( ) {
console. log ( 'fn2()' )
}
var fn3 = function ( ) {
console. log ( 'fn3()' )
}
3. 问题: 变量提升和函数提升是如何产生的?
代码分类(位置)
全局执行上下文
在执行全局代码前将window确定为全局执行上下文 对全局数据进行预处理
var定义的全局变量==>undefined, 添加为window的属性 function声明的全局函数==>赋值(fun), 添加为window的方法 this==>赋值(window) 开始执行全局代码
函数执行上下文
在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象(虚拟的, 存在于栈中) 对局部数据进行预处理
形参变量==>赋值(实参)==>添加为执行上下文的属性 arguments==>赋值(实参列表), 添加为执行上下文的属性 var定义的局部变量==>undefined, 添加为执行上下文的属性 function声明的函数 ==>赋值(fun), 添加为执行上下文的方法 this==>赋值(调用函数的对象) 开始执行函数体代码
执行上下文栈
在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象 在全局执行上下文(window)确定后, 将其添加到栈中(压栈) 在函数执行上下文创建后, 将其添加到栈中(压栈) 在当前函数执行完后,将栈顶的对象移除(出栈) 当所有的代码执行完后, 栈中只剩下window 案例:
console. log ( 'gb: ' + i)
var i = 1
foo ( 1 )
function foo ( i ) {
if ( i == 4 ) {
return
}
console. log ( 'fb:' + i)
foo ( i + 1 )
console. log ( 'fe:' + i)
}
console. log ( 'ge: ' + i)
1. 依次输出什么?
gb : undefined
fb : 1
fb : 2
fb : 3
fe : 3
fe : 2
fe : 1
ge : 1
2. 整个过程中产生了几个执行上下文? 5
function a ( ) { }
var a
console. log ( typeof a)
if ( ! ( b in window) ) {
var b = 1
}
console. log ( b)
var c = 1
function c ( c ) {
console. log ( c)
var c = 3
}
c ( 2 )