js 原型链 学习理解 简单代码理解 JS原型链

1.首先先了解什么是构造函数 

    构造函数就只是一个普通的函数

    new 关键字调用的函数就是构造函数

2.构造函数是用来干什么的？

    就是用来创建对象的

    // 构造函数
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    // p1 就是构造函数的 实例对象
    let p1 = new Person('张三', 18);


    // new 关键词调用的函数就是构造函数 so Person() is a constructor function

然后我们要知道 每一个构造函数都有一个 prototype 属性 指向这个构造函数的 原型对象

我们可以得到以下的关系 

 构造函数就是 构造对象的  p1就是new关键字构造出来的对象

实例对象可能有很多 每一个实例对象都有一个 __proto__ 属性 指向了该对象的原型

因为 这个实例对象是 Person构造出来 的 所以指向了Person的原型

ok 我们更新下图

 那么从这个图 我们可以知道     P1.__proto__  ===  Person.prototype

    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    let p1 = new Person('张三', 18);
    console.log(p1.__proto__ === Person.prototype); // true
    // ES5新写法
    console.log(Object.getPrototypeOf(p1) === Person.prototype); // true

知识点： 只有函数才有prototype属性

每一个实例原型上都有一个 constructor 指向构造函数本身

 

    // 构造函数
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    // p1 就是构造函数的 实例对象
    let p1 = new Person('张三', 18);
    console.log(Person.prototype.constructor === Person); // true

我们看下边的例子==

    function Person() {
    }

    Person.prototype.say = function () {
        console.log('hello');
    }

    let p1 = new Person('张三', 18);

    p1.say(); // hello

p1是构造函数Person生成的对象   这个对象身上并没有 say 这个方法

为什么 p1.say 会得到hello呢？？？

因为如果一个对象上找不到某个属性的时候 它会去 构造他的函数的原型上去找

也就是找到了 Person (构造他的函数)  的原型 prototype => Person.prototype

我们看下边的例子

    function Person() {
    }

    let p1 = new Person();

    console.log(p1.constructor === Person); // true

为什么 p1.constructor === Person呢？

其实就是 

p1身上并没有 constructor 但是 他会去 构造他的函数的原型上去找

也就是 Person.prototype  那也就是  

console.log(Person.prototype.constructor === Person);

原型他也有原型   指向的是 Object.prototype

console.log(Person.prototype.__proto__ === Object.prototype); // true

那 Object.prototype的原型是什么呢？

反正是null

 

    let arr = []
    //其实 arr 就是 Array 的实例对象 就相当于 Array这个构造函数创建的数组
    console.log(arr.__proto__ === Array.prototype); // true
    
    let obj = {}
    //其实 obj 就是 Object 的实例对象
    console.log(obj.__proto__ === Object.prototype); // true

就拿 随便声明的一个数组举例