我对原型/原型链的理解

249 阅读2分钟

原型规则

没有为什么,就是规则,记一下。
1、每一个函数数据类型(普通函数、类)都自带有一个原型属性:prototype,该属性是对象数据类型的值。
2、在prototype上浏览器赋予其constructor属性,即构造函数。其属性值是当前函数(类)本身。
3、每一个对象数据类型(包括普通对象、实例、prototype...)自带一个__proto__属性,属性值是当前实例所属类的原型(prototype

图示理解原型


(1)f1 instanceof Object -> true 因为f1通过__proto__可以向上查找,不管多少级都能找到Object
(2)Object.prototype上没有__proto__这个属性,因为它是基类。

一个问题

f1.hasOwnProperty("x"); //->hasOwnProperty是f1的一个属性,但是f1的私有属性上并没有这个方法,这是为什么呢? 所以引入原型链进行处理!

原型链模式

1)通过对象名.属性名的方式获取属性值的时候,首先在对象对的私有属性上进行查找,如果私有中存在这个属性,则获取的是私有属性值;否则通过__proto__找到所属类的原型(类的原型上定义的属性和方法都是当前实例的公有属性和方法);如果原型上也没有,则继续通过原型的__proto__向上继续查找,一直找到基类原型Object.prototye为止;如果基类原型也没有,则结果为undefined。
2)IE浏览器,原型模式是同样的原理,但是它担心你通过__proto__将公有修改,禁止我们使用__proto__,即自我保护机制。

原型链中this的两种情况

//在原型链中this的两种情况:
//在类中this.xxx=xxx; this->当前类的实例  
//某一个方法中的this->看执行的时候“.”前面是谁就是谁
//1)需要先确定this的指向(即this是谁)
//2)把this替换成对应代码
//3)按照原型链查找机制,一步步查找结果
function Fn() {
    this.x = 100;
    this.y = 200;
    this.getY =function () {
        console.log(this.y);
    };
}
Fn.prototype = {
    constructor: Fn,
    y: 300;
    getX: function () {
        console.log(this.x);
    },
    getY: function () {
        console.log(this.y);
    } 
};
var f =new Fn;
f.getX();  //->console.log(x) -> 100 
f.__proto__.getX(); //->this是f.__proto__   ->console.log(f.__proto__.x)  ->undefined  
Fn.prototype.getX(); // ->underfined  
f.getY() //    ->200   
f.__proto__.getY();  ->300  

再说一个常见的东西,但没有想过的。 arr为什么可以使用sort方法呢?->因为sort是Array.prototype上的公有方法,而数组arr是Array的一个实例,所以可以用。