Javascript中的原型-原型链

92 阅读2分钟

原型 & 原型链

在了解原型和原型链之前,我们先来了解一下构造函数模式。

通过new执行的函数,那么这个函数就成为了一个类,它的返回值就是一个实例。函数可以被new执行多次,每执行一次就会创建一个实例。不了解new的可以移步;

    function fn(name, age, sex) {
        this.name = name
        this.age = age
        this.sex = sex
    };
  var new1 = new fn('aaaa', 18, 0) //此时new1就是fn类的一个实例
  console.log(new1)

控制台打印结果

image.png

eat是我们向fn类的原型上添加的方法,此时的age、name以及sex都是当前实例的私有属性,而在prototype上的属性就是所有实例的公有属性。

了解完构造函数模式,就衍生出了类和实例的概念

什么是类?比如说中国是一个类,小明是一个中国人。那么小明就相当于是中国的一个实例,可以使用中国的所有的公共资源。

关于原型必须记住的三句话

1.原型prototype是一个函数的固有属性(对象),只有当使用new去执行这个函数的时候 原型才能体现他的作用,这个原型中的属性 是当前函数的所有实例的公用属性

2.在prototype上浏览器天生给他加了一个constructor(第二种数据类型检测方法)属性 属性值就是构造函数本身(类)

3.所有的实例 都会有一个属性_proto_:指向的就是当前实例 所属类的prototype(原型)

如何将一个私有属性提升为公有属性?

将属性放在类的原型上就可以,这样当前类的实例都可以调用这些方法。

function Person(name, age) {
        this.name = name
        this.age = age
    };
    Person.prototype.myFn = function() {
        console.log('hello world');
    };
    let res = new Person('张三', 20);
    console.log(res);
    res.myFn();

image.png

原型链

当我们通过 实例.属性名,例如res.myFn(),进行成员访问的时候。首先会在实例本身查找,如果又找到,那么就会停止查找,直接使用。如果没有就会通过__proto__到所属类的原型上去查找,如果还没有就再通过当前类的__proto__向上查找,一直找到Object为止(Object.__proto__是null)。