JS原型与原型链

Posted 2022-08-04 yaokai729

prototype

1. 函数的prototype属性

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

   • 原型对象中有一个属性constructor, 它指向函数对象

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

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

显式原型和隐式原型

1. 每个函数function都有一个prototype，即显式原型

2. 每个实例对象都有一个proto，可称为隐式原型

3. 对象的隐式原型的值为其对应构造函数的显式原型的值

4. 内存结构

5. 总结:

   • 函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象

   • 对象的proto属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值

   • 程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

原型链

• 访问一个对象的属性时，

  • 先在自身属性中查找，找到返回

  • 如果没有, 再沿着proto这条链向上查找, 找到返回

  • 如果最终没找到, 返回undefined

• 别名: 隐式原型链

• 作用: 查找对象的属性(方法)

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

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

　　　console.log(Object.prototype instanceof Object) // false

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

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

  　　 console.log(Function.proto === Function.prototype)

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

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

• instanceof是如何判断的?

  • 表达式: A instanceof B

  • 如果B函数的显式原型对象在A对象的原型链上, 返回true, 否则返回false

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

面试题

    var F = function();
    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. 利用原型链实现对父类型对象的方法继承

2. 利用call()借用父类型构建函数初始化相同属性

  function Person(name, age) 
        this.name = name
        this.age = age
    
    Person.prototype.setName = function (name) 
        this.name = name
    
    function Student(name, age, price) 
        Person.call(this, name, age) //得到父类型的属性
        this.price = price
    
    Student.prototype = new Person()  //得到父类型的方法
    Student.prototype.constructor = Student
    Student.prototype.setPrice = function (price) 
        this.price = price
    
?
    var s = new Student(‘Tom‘, 12, 10000)
    s.setPrice(11000)
    s.setName(‘Bob‘)
    console.log(s)
    console.log(s.constructor)

变量提升和函数提升

1. 变量声明提升

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

   • 值: undefined

2. 函数声明提升

   • 通过function声明的函数, 在之前就可以直接调用

   • 值: 函数定义(对象)

3. 先执行变量提升，再执行函数提升

执行上下文

代码分类(位置)

• 全局代码

• 函数代码

全局执行上下文

• 在执行全局代码前将window确定为全局执行上下文

• 对全局数据进行预处理

  • var定义的全局变量==>undefined, 添加为window的属性

  • function声明的全局函数==>赋值(fun), 添加为window的方法

  • this==>赋值(window)

  • 开始执行全局代码

函数执行上下文

• 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象

• 对局部数据进行预处理

  • 形参变量==>赋值(实参)==>添加为执行上下文的属性

  • arguments==>赋值(实参列表), 添加为执行上下文的属性

  • var定义的局部变量==>undefined, 添加为执行上下文的属性

  • function声明的函数 ==>赋值(fun), 添加为执行上下文的方法

  • this==>赋值(调用函数的对象)

执行上下文栈（后进先出）

1. 在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象

2. 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)

3. 在函数执行上下文创建后, 将其添加到栈中(压栈)

4. 在当前函数执行完后,将栈顶的对象移除(出栈)

5. 当所有的代码执行完后, 栈中只剩下window