JavaScript必备小知识- 原型-原型链 的学习

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

28-原型-原型链

JavaScript 原型-原型链 的学习

要理解原型 和原型链, 首先要理解 原型模式的执行流程:

首先在实例上查找，如果有实例属性或方法  就返回   ，如果没有，就去原型上查找 如果有就返回 

如果原型上没有对应的属性或方法，就去最外层的 Object.prototype上继续查找  如果有就返回，没有返回 undefined 

一. 原型

将属性和方法写在构造函数的外面

说明 :    

• 1、写在构造函数外面的属性叫做原型属性  方法叫做原型方法
• 2、通过  构造函数.prototype.属性   创建原型属性       构造函数.prototype.方法  创建原型方法

优点 ：

    多个同类对象的相同方法是共享的  不会被重建 

缺点 ：     所有对象的属性名都相同

二. 原型链

什么叫原型链? --> 实例对象和原型之间的连接    就叫做原型链

原型链和作用域链之间的联系

作用域链 ：  首先在函数内部查找某个变量，如果有就返回  不再向外查找，否则继续向函数外面查找

    // 实现 new 关键字
    function _new(fn, ...args){
      if(typeof fn !== 'function'){
        return new Error('fn 须是一个函数')
      }
      let obj = Object.create(fn.prototype)
      let res = fn.call(obj, ...args)
      if(res !== null && (typeof res === 'object' || typeof res === 'string')){
        return res
      }
      return obj
    }

    // 实例对象与原型之间的连接 就叫做原型链

    // 实现 instanceof
    function _instanceof(a, b) {
      while(a) {
        if(a.__proto__ === b.prototype) return true
        a = a.__proto__
      }
      return false
    }

    function A(a, b) {
      this.a = a
      this.b = function () { console.log('aaa') }
    }
    var a = new A()
    console.log(a.__proto__)
    console.log(a.__proto__.__proto__)

    function print(fn){
      const b = 100;
      fn()
    }
    const b = 200;
    function fn(){
      console.log('b: ', b)
    }
    print(fn)
  </script>