• 【原型模式】--重写原型对象prototype的影响


    //【原型模式】--重写原型对象prototype的影响 2014-12-12
    //定义构造函数
    function Person() { }
    //直接指定构造函数的原型为一个对象(为了简化逐个给原型添加成员的操作),但是这样写带来了两个问题,我们先来看第一个问题:
    Person.prototype = {
        name: "wede",
        age: 29,
        job: "SoftWare",
        say: function () {
            alert("Hello,I'm " + this.name + "," + this.age + " years old,i'm a " + this.job);
        }
    };
    //看看此时原型对象的constructor
    document.write(Person.prototype.constructor + "<br/>"); //function Object() { [native code] }

    //是Object
    //这就意味着如果此时我们对其进行类型检测就会出问题,不会得到预期的类型Person,因为在上面prototype实际上是被重写了。
    var person = new Person();
    document.write(person.constructor + "<br/>"); //function Object() { [native code] },其实这里我们期望的是Person
    document.write(person instanceof Person); //true


    //解决办法:
    Person.prototype = {
        constructor: Person, //重新指定其constructor属性
        name: "wede",
        age: 29,
        job: "SoftWare",
        say: function () {
            alert("Hello,I'm " + this.name + "," + this.age + " years old,i'm a " + this.job);
        }
    };

    //然后我们得到了预期的结果:
    document.write(Person.prototype.constructor + "<br/>"); //function Person() { }
    document.write(person.constructor + "<br/>"); //function Person() { }
    document.write(person instanceof Person); //true

    //即使这样,还是会有不足,那就是本来是不可枚举的constructor属性由于重设的缘故导致它的[[Enumerable]]内部特性变为了true,
    //也就是说,现在遍历对象会包含constructor属性:
    for (var prop in Person.prototype) {
        document.write(prop + ","); //constructor,name,age,job,say,
    }
    for (var prop in person) {
        document.write(prop + ","); //constructor,name,age,job,say,
    }
    //这里需要补充说明的是,使用for-in循环时,返回的是所有能够通过对象访问、可枚举的属性,其中既包括存在于实例中的属性,也包括存在于原型中的属性。《高三》P153
    //目前只有针对ECMAScript 5的解决方案:即通过Object.definProperty()方法重新设置原型中的constructor属性。《高三》P156

    //给prototype直接指定另一个对象带来的第二个问题:
    //重写原型对象切断了现有原型与任何之前存在的对象实例之间的联系,因为实例引用的([[Prototype]])最初的原型。
    //详见《高三》P156

  • 相关阅读:
    js中图片base64格式转文件对象
    vue中添加百度统计代码
    一个基于vueCli3的移动端多页面脚手架
    一个基于WabPack4的 Vue 多页面原生写法脚手架
    GPU加速有坑?
    mac效率工具
    git操作详解
    高性能移动端开发
    浅析vue数据绑定
    移动端适配
  • 原文地址:https://www.cnblogs.com/zhaow/p/9754413.html
Copyright © 2020-2023  润新知