美文网首页
JS原型理解

JS原型理解

作者: SmileMylife | 来源:发表于2019-08-06 21:24 被阅读0次

    示例:

    //Person对象的构造函数
    function Person(username, password) {
    
    }
    
    //定义构造函数的原型对象属性
    Person.prototype.username = "zhangsan";
    Person.prototype.sayHello = function() {
        alert("hello");
    
    }
    
    var person = new Person();
    
    console.log(person.__proto__ == Person.prototype);      //返回true,说明了实例的_proto_属性和构造函数的prototype属性共同指向了原型对象
    console.log(Person.prototype.constructor == Person);  //自定义对象的原型对象中只包括了constructor属性,该属性指向了构造函数本身
    console.log(Person.prototype.constructor.toLocaleString());     //可证明上一条
    
    image

    ​总结如下:无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个 prototype 属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个 constructor (构造函数)属性,这个属性包含一个指向 prototype 属性所在函数的指针。就拿前面的例子来说, Person.prototype. constructor 指向 Person。而通过这个构造函数,我们还可继续为原型对象添加其他属性和方法。
    创建了自定义的构造函数之后,其原型对象默认只会取得 constructor 属性;至于其他方法,则都是从 Object 继承而来的。当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部 属性),指向构造函数的原型对象。ECMA-262 第 5 版中管这个指针叫[[Prototype]]。虽然在脚本中 没有标准的方式访问[[Prototype]],但 Firefox、Safari 和 Chrome 在每个对象上都支持一个属性 proto;而在其他实现中,这个属性对脚本则是完全不可见的。不过,要明确的真正重要的一点就 是,这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间。

    改变某个构造函数的原型:

    function Father(xuexing, shuangyanpi, height) {
        this.xuexing = xuexing;
        this.shuangyanpi = shuangyanpi;
        this.height = height;
        this.makeMoney = function() {
            console.log("make money");
        }
    }
    
    function Son(name, age) {
        this.name = name;
        this.age = age;
        this.learn = function() {
            console.log("learn");
        }
    }
    
    var father = new Father("AB", "danyanpi", "175");
    Son.prototype = father;
    var son1 = new Son("zhangsan", "22");
    console.log(son1);
    console.log(son1.__proto__);
    console.log(son1.xuexing);
    console.log(son1.height);
    console.log(son1.shuangyanpi);
    son1.makeMoney();
    
    image

    以上更改了原构造函数的原型,和未更改前完全不一样,需特别注意。在重置原型之前创建的对象,它的原型还是最初始的原型对象,而非最新的原型对象。

    相关文章

      网友评论

          本文标题:JS原型理解

          本文链接:https://www.haomeiwen.com/subject/hxjgdctx.html