JS高级（5）—— 原型与原型链

ゞ浴缸里的玫瑰 2022-12-22 04:41 103阅读 0赞

#### 一、函数的prototype属性 ####

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

console.log(Date.prototype, typeof Date.prototype)
      function Fun () { 
    
      }
      console.log(Fun.prototype)  // 默认指向一个Object空对象(没有我们的属性)

![在这里插入图片描述][20201117164254794.png_pic_center]  
2. 原型对象中有一个属性constructor，它指向函数对象

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

![在这里插入图片描述][20201117164438534.png_pic_center]

#### 二、给原型对象添加属性（一般都是方法） ####

*  作用：函数的所有实例对象自动拥有原型中的属性（方法）

Fun.prototype.test = function () { 
    	console.log('test()')
    }
    var fun = new Fun()
    fun.test()

![在这里插入图片描述][20201117164533675.png_pic_center]

function F() { 
    
    }
    F.prototype.age = 12 //添加属性
    F.prototype.setAge = function (age) {  // 添加方法
    	this.age = age
    }
    // 创建函数的实例对象
    var f = new F()
    console.log(f.age)
    f.setAge(23)
    console.log(f.age)

![在这里插入图片描述][2020111716520818.png_pic_center]

#### 三、显式原型与隐式原型 ####

1.  每个函数function都有一个prototype，即显式原型（属性）
2.  每个实例对象都有一个\_\_proto\_\_，可称为隐式原型（属性）
3.  对象的隐式原型的值为其对应构造函数的显式原型的值

//定义构造函数
    function Fn() { 
    
    }
    // 1. 每个函数function都有一个prototype，即显式原型属性, 默认指向一个空的Object对象
    console.log(Fn.prototype)
    // 2. 每个实例对象都有一个__proto__，可称为隐式原型
    //创建实例对象
    var fn = new Fn()
    console.log(fn.__proto__)
    // 3. 对象的隐式原型的值为其对应构造函数的显式原型的值
    console.log(Fn.prototype===fn.__proto__) // true

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]  
4. 内存结构（图）

//定义构造函数
    function Fn() {    // 内部语句: this.prototype = {}
    
    }
    console.log(Fn.prototype)
    var fn = new Fn()  // 内部语句: this.__proto__ = Fn.prototype
    console.log(fn.__proto__)
    console.log(Fn.prototype===fn.__proto__)
    
    //给原型添加方法
    Fn.prototype.test = function () { 
      console.log('test()')
    }
    //通过实例调用原型的方法
    fn.test()

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]  
5. 总结：

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

#### 四、原型链 ####

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

console.log(Object)
    console.log(Object.prototype)
    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)
    fn.test3()

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 3]  
4. 函数的显示原型指向的对象默认是空Object实例对象（但Object不满足）

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

![在这里插入图片描述][20201117202347487.png_pic_center]

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

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

![在这里插入图片描述][20201117202402970.png_pic_center]

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

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

![在这里插入图片描述][20201117202411605.png_pic_center]

#### 五、原型链属性问题 ####

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

function Fn() { 
    
    }
    Fn.prototype.a = 'xxx'
    var fn1 = new Fn()
    console.log(fn1.a, fn1)
    
    var fn2 = new Fn()
    fn2.a = 'yyy'
    console.log(fn1.a, fn2.a, fn2)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 4]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 5]

#### 六、instanceof是如何判断的? ####

*  表达式: A instanceof B
 *  如果B函数的显式原型对象在A对象的原型链上, 返回true, 否则返回false
 *  Function是通过new自己产生的实例

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

![在这里插入图片描述][20201117215501199.png_pic_center]

//案例2
    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

![在这里插入图片描述][20201117215532350.png_pic_center]

#### 七、面试题 ####

##### 题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);

起初我也很迷惑，不过看视频里画的图就明白了，自己也跟着重新画了一遍，用了不同颜色标记，图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 6]  
  `b.n b.m`我们可以看绿色部分，根据箭头指向，可得出`b.n`, `b.m`为undefined；  
  `c.n c.m`我们可以看黄色部分，根据箭头指向，可得出`c.n`为2，`c.m`为3；  
  打印结果如下：  
![在这里插入图片描述][2020112016054235.png_pic_center]

##### 题2： #####

`f.a(); f.b(); F.a(); F.b();`运行结果为`a() 报错 a() b()`  
![在这里插入图片描述][20201120165648247.png_pic_center]  
  f.a的查找路径: f自身: 没有 —> f.**proto**(Object.prototype): 找到a，故打印出：a()。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 7]  
  f.b的查找路径: f自身: 没有 —> f.**proto**(Object.prototype): 没有 —> f.**proto**.**proto** (Object.prototype.**proto**): 没有，故报错。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 8]  
  F.a的查找路径: F自身: 没有 —> F.**proto**(Function.prototype): 没有 —> F.**proto**.**proto**(Object.prototype): 找到a，故打印出：a()。  
  F.b的查找路径: F自身: 没有 —> F.**proto**(Function.prototype): 找到b，故打印出：b()。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 9]

[20201117164254794.png_pic_center]: /images/20221120/bff194e5bd314204aa2dc3936b9396f9.png
[20201117164438534.png_pic_center]: /images/20221120/8abf732da8f442c8bd382246c5ce48a9.png
[20201117164533675.png_pic_center]: /images/20221120/4a522132377d452ca13c332d139dcac4.png
[2020111716520818.png_pic_center]: /images/20221120/d06d9d509ad84963b92a128bda770192.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/1e74c5177a714c91bc28b87a7693f745.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/4f11038af05943acaf3ee1c6b648ec35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/115e5167ac134a6994e4f4c328b23d0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/c67ff6ebe5ea458d9627ac0119d60527.png
[20201117202347487.png_pic_center]: /images/20221120/d1d0182baccc439485b72b89ed494819.png
[20201117202402970.png_pic_center]: /images/20221120/23e2c38cebe2468da6552a2fb8fe3137.png
[20201117202411605.png_pic_center]: /images/20221120/eeaa1142a4ef4a878f22f84f6b719ab2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/6ffde6bac25c4d3f9d91f9e93a0e6748.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/82af8e05c3f341aa8f5893733b8a3e0b.png
[20201117215501199.png_pic_center]: /images/20221120/bf94e3d95fbe4e67830e8f872a545e31.png
[20201117215532350.png_pic_center]: /images/20221120/66f8daa6051147f294853edea8cc262e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/aeeae0be590840b4b53f07035293f2dd.png
[2020112016054235.png_pic_center]: /images/20221120/66c5606647bd442c9e270850fa17446a.png
[20201120165648247.png_pic_center]: /images/20221120/f99160b1d296425c8ab02d76f4890b67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221120/75adc283ff7e4dc094a2a6fc4ca90fab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221120/2597a61b9afc4dfe8aab75af7a95f430.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221120/9b20fbeefbed4dda88a1a534482be2ab.png