js原型和原型链

287 阅读2分钟

原型

1.原型是什么:定义构造函数之后,系统会默认为构造函数关联一个对象,这个对象就是原型

2.原型操作:原型是一个对象,所以可以在原型添加成员--挂载成员

3.作用:只有当前构造函数所创建的对象,才可以调用这个原型中的成员

原型链:一个对象想使用某个成员,先找自己,自己没有找原型,原型还没有,就找原型的原型,直到null

原型上存放函数

  1. 解决了同一个 say 浪费 内存的问题
  2. 解决了污染全局变量的问题
        function Fn(name, age) {
            this.name = name;
            this.age = age;
        }
        // 将刚才的全局函数say 直接挂载到 构造函数的原型上 即可
        // prototype 是个对象 每一个构造函数都会内置有的. 我们称之为原型
        Fn.prototype.say = function() {
            console.log(this.name);
        }

        const obj = new Fn("张三", 83);
        const obj1 = new Fn("李四", 84);
        console.log(obj);
        console.log(obj.name);
        console.log(obj1.name);
        obj.say()
        console.log(obj.__proto__); //查找obj的原型
        console.log(obj.__proto__.constructor); //查找obj的构造函数
        console.log(obj.say === obj1.say); // true

proto)属性可以找原型

constructor 属性可以找构造函数

原型的关系

构造函数、实例、原型三者之间的关系

构造函数:构造函数就是一个函数,配合new可以新建对象。

实例:通过构造函数实例化出来的对象我们把它叫做构造函数的实例。一个构造函数可以有很多实例。

原型:每一个构造函数都有一个属性prototype,函数的prototype属性值就是原型。通过构造函数创建出来的实例能够直接使用原型上的属性和方法。

原型的三角关系.png

原型链

概念:任何一个对象,都有原型对象,原型对象本身又是一个对象,所以原型对象也有自己的原型对象,这样一环扣一环就形成了一个链式结构,我们把这个链式结构称为:原型链。

proto.png

总结:Object.prototype是原型链的尽头,Object.prototype的原型是null。

属性查找原则

如果是获取操作

  1. 会先在自身上查找,如果没有
  2. 则根据__proto__对应的原型去找,如果没有
  3. 一直找到Object.prototype,如果没有,那就找不到从而报错