美文网首页
关于JavaScript 原型的几个案例及使用

关于JavaScript 原型的几个案例及使用

作者: 玉面小猿 | 来源:发表于2018-03-17 13:17 被阅读0次

    创建原型对象的两种方式

    function Person() {}
    Person.prototype.name ='Nicholas',
    Person.prototype.job ='Engineer'

    Person.prototype = {
    name: 'Nicholas',
    age: 29,
    job: 'software engineer',
    sayName: function () {
    console.log(this.name);
    }
    };
    //方式二对原型进行封装 设置成一个以对象字面量创建的新对象 其他都相同 但是constructor不再指向person
    //如果必须要constructor指回原型,设置如下
    Person.prototype = {
    constructor:'person',
    name: 'Nicholas',
    age: 29,
    job: 'software engineer',
    sayName: function () {
    console.log(this.name);
    }
    };
    var person1 = new Person();
    person1.name = 'Greg';
    person1.sayName(); Greg
    //删除定义在person1上的属性 继续查找原型属性
    // delete person1.name;
    person1.sayName(); //undefined
    //检测某属性时定义在原型上还是当前对象上
    // 使用hasOwnProperty方法 jsHint 单引 双引 交替用
    console.log('person1.hasOwnProperty("name")' + person1.hasOwnProperty('name'));
    //获得对象上所有的可枚举属性 使用 obj.keys()
    var p1 = new Person();
    p1.name = 'rachel';
    p1.sayName = function () {
    alert('p1.sayName()');
    };
    var p1keys = Object.keys(p1);
    console.log('p1keys=' + p1keys);
    //实例中的指针只指向原型,不指向构造函数
    function Origin(){
    }
    var Ofriend= new Origin();
    Origin.prototype ={
    name:'Rachel',
    age:'21'
    };
    console.log('Ofriend.name'+ Ofriend.name);
    //若直接赋值给函数原型,此时指针指向原型的job,当前对象就可以查找到
    // var friend = new Person();
    // //注意此处是重写原型而不是构造函数
    Person.prototype.job= 'Engineer';
    console.log('friend.job ='+friend.job);

    组合使用原型模式和构造函数模式

    原型模式的缺点:
    1.它省略了为构造函数传递初始化参数这一环节,结果所有实例在 默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但还不是原型的大问题。
    2.原型模式的大问题是由其共享的本性所导致的。 原型中所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性倒 也说得过去,毕竟(如前面的例子所示),通过在实例上添加一个同名属性,可以隐藏原型中的对应属 性。然而,对于包含引用类型值的属性来说,问题就比较突出了。
    且看下面例子:
    Person.prototype = { constructor: Person, name : "Nicholas", age : 29, job : "Software Engineer", friends : ["Shelby", "Court"], sayName : function () { alert(this.name); } };

    var person1 = new Person(); var person2 = new Person();

    person1.friends.push("Van");

    alert(person1.friends); //"Shelby,Court,Van"
    alert(person2.friends); //"Shelby,Court,Van"
    alert(person1.friends === person2.friends);
    真可怕,所有的属性person1 person2都互通了
    因此我们使用原型与构造函数混合的模式
    所使用的方法是互通共享的,但数据储存的数组不会共享
    套路如下:
    function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.friends = ["Shelby", "Court"]; }

    Person.prototype = { constructor : Person, sayName : function(){ alert(this.name); } }

    var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor");

    person1.friends.push("Van"); alert(person1.friends); //"Shelby,Count,Van" alert(person2.friends); //"Shelby,Count" alert(person1.friends === person2.friends); //false alert(person1.sayName === person2.sayName); //true

    相关文章

      网友评论

          本文标题:关于JavaScript 原型的几个案例及使用

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