javascript的对象封装及原型理解

封装对象的模板

在B站学习李南江老师的jQuery时，学习到了一种封装对象的方法，我认为很有用，所以记录下来，方便学习和记忆。大家也可以去直接看视频更加便于理解(AV:22807707);

1.在init中初始化信息，并调用say()

function Person(){

    }
    Person.prototype = {
        constructor : Person,
        init : function () {
            this.name = "李华";
            this.age = 19
        },
        say : function () {
            console.log("我叫"+this.name+"，我今年"+this.age);
        }
    };

    var p = new Person();
    p.init();
    p.say();

输出为

2.如果不调用init()，直接调用方法say()

function Person(){

    }
    Person.prototype = {
        constructor : Person,
        init : function () {
            this.name = "李华";
            this.age = 19
        },
        say : function () {
            console.log("我叫"+this.name+"，我今年"+this.age);
        }
    };

    var p = new Person();
//    p.init();            这里变成了注释
    p.say();

输出为

原因很简单，就是因为虽然创建了p这个对象，但是new在执行时只会执行构造函数Person()中的代码块，而并不会去执行原型对象prototype中的任何代码，因此init()没有被执行，所以p对象没有this.name和this.age属性。p.say()自然也找不到这两个属性而显示undefined。

3.如果每创建一个对象都要调用init()，那将会很麻烦，解决办法如下

function Person2(){
        return new Person2.prototype.init();
    }
    Person2.prototype = {
        constructor: Person2,
        init: function () {
            this.name = "李华";
            this.age = 19
        },
        say: function () {
            console.log("我叫" + this.name + "，我今年" + this.age);
        }
    };
    Person2.prototype.init.prototype = Person2.prototype;

    var p2 = new Person2();
    p2.say()

输出为

解释一下
①先引用一下李南江老师的分析图，结合图和文字更好理解。(自行把Dog换成person)。

②修改new的返回值，在默认的new关键字后返回的是一个通过Person2实例化的对象，我们将返回值修改为new Person2.prototype.inti(),这样我们得到的返回值就是一个通过init()函数实例化的对象，根据new在执行时所做的操作，（详情可以我看另一篇文章：javascript中的new到底做了哪些事情？），init()中的代码会被执行，因此我们在var p2 = new Person2()的时候就自动执行了init()。

③将init的prototype指向Person2.prototype。因为Person2.prototype中还保存了很多其他的方法，但我们目前得到的对象是由init()实例化而得到的，因为我们访问不到Person2.prototype中的方法，所以我们要让init的prototype指向Person2。
即Person2.prototype.init.prototype = Person2.prototype;