Js高级第二天

原型和原型链

    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    Person.prototype.play = function () {
        console.log("吃鸡战场");

    }

    var p1 = new Person('小明', 20);
    p1.__proto__.play(); //不标准的. 简写
    p1.play();

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

    // 问题 : 实例对象为什么能访问原型对象上的方法? . 通过什么访问的?
    // 回答 : 因为p1.__proto__指向了构造函数中的prototype, 通过__proto__来访问
    // 说明 : 原型链: 是一种关系, 是实例对象和原型对象之间的关系, 关系就是通过__proto__来联系的


    console.dir(p1);
    console.dir(Person);

原型链的指向

console.dir(document.getElementById("box"));

    //构造函数
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    Person.prototype.play = function () {
        console.log("吃鸡战场");

    }

    var p1 = new Person('小明', 20);
    p1.__proto__.play(); //不标准的. 简写
    p1.play();
    console.dir(Person.prototype); //原型对象
    console.dir(Person.prototype.__proto__); // object
    console.dir(Object.prototype.__proto__); // null

    /*
    * 实例对象中有__proto__原型属性, 理解为 : 对象中有__proto__原型
    * 构造函数中有prototype原型
    * prototype是对象, 也可以理解为prototype对象也有__proto__对象
    *
    * 只要对象, 必定有__proto__
    *
    * 原型链最终指向null
    *
    * 总结 : 只要对象, 必定有__proto__, 只要是下划线原型, 就会指向该对象所在的构造函数中原型对象
    *
    * */

改变原型指向

// function Person() {
    //
    // }
    //
    // Person.prototype.eat = function () {
    //     console.log("吃火锅");
    //
    // };
    //
    // // 此时, prototype指向了一个新对象, this指向也发生变化
    // Person.prototype = {
    //     constructor: Person,
    //     study : function () {
    //         console.log("ok");
    //
    //     }
    // };
    //
    // var per = new Person();
    //
    // // per.eat();  //报错, 因为指向已经变化
    // per.study();
    // console.dir(per);


    function Person() {

    }

    Person.prototype.eat = function () {
        console.log("吃火锅");

    };

    var per = new Person();

    function Student() {

    }


    //让学生和人发生点关系, 即this指向发生变化
     Student.prototype = new Person();

    Student.prototype.study = function () {
        console.log("学习吃火锅");

    };
    var stu = new Student();

    stu.eat();  //能访问人的方法

    stu.study(); // 因为this发生变化, 学生不能调用自己的方法了

    /*
    * 总结 :
    * 1. 原型的指向可以改变
    * 2. 通过prototype这个原型对象直接指向其他的对象
    *
    *
    * */