zoukankan      html  css  js  c++  java
  • 继承---原型式继承

    原型式继承

    基于已有的对象创建新对象

    ①obj()浅复制

    对象的属性会共享

    function obj(o){
     function F(){}
     F.prototype=o;
     return new F();
    }
    var person={
    name:"zhangsan",
    age:18,
    friends:['Lisi','wangwu','zhaoliu']
    };
     var thePerson=obj(person);
    thePerson. name='Sunmenghua';
    thePerson.friends.push('liulaogen');
    console.log(thePerson.name); //Sunmenghua
    console.log(thePerson.friends);
    //["Lisi", "wangwu", "zhaoliu", "liulaogen"]
    
     var theOtherPerson=obj(person);
    theOtherPerson. name='Qi Haiyang';
    theOtherPerson.friends.push('Da liu');
    console.log(theOtherPerson.name);
    //Qi Haiyang
    console.log(theOtherPerson.friends);
    // ["Lisi", "wangwu", "zhaoliu", "liulaogen", "Da liu"]
    
    console.log(thePerson.name);
    //Sunmenghua
    console.log(thePerson.friends);
    // ["Lisi", "wangwu", "zhaoliu", "liulaogen", "Da liu"]
    
    console.log(person.name);
    //zhangsan
     

    ②Object.create() 

    相当于obj()函数;

    可接受两个参数:新对象的原型对象和(新对象的专属属性)            {接受几个对象的原理结果相同,只是赋值方式变了}

    A.当只接受一个参数

    同名属性会被覆盖,但是不会改变其他对象的属性,有各自的name;但friends数组都会改变

    这里修改了thePerson.name的值,theOtherPerson.name的值并未改变,并不是因为thePerson和theOtherPerson有独立的name值,而是thePerson.name="Sunmenghua'是给thePerson添加了name值,并非修改了原型上的name值。

    因为我们找对象上的属性时,总是先找实例上对象,没有找到的话再去原型对象上的属性。实例对象和原型对象上如果有同名属性,总是先取实例对象上的值
            var person = {
                name: "zhangsan",
                age: 18,
                friends: ['Lisi', 'wangwu', 'zhaoliu']
            };
            var thePerson = Object.create(person);
            thePerson.name = 'Sunmenghua';
            thePerson.sex = 'female';
            thePerson.friends.push('liulaogen');
            console.log(thePerson.name); //Sunmenghua 
            console.log(thePerson.friends); //["Lisi", "wangwu", "zhaoliu", "liulaogen"] 
            console.log(thePerson.sex); //'female';
    
            var theOtherPerson = Object.create(person);
            theOtherPerson.name = 'Qi Haiyang';
            theOtherPerson.friends.push('Da liu');
            console.log(theOtherPerson.name); //Qi Haiyang
            console.log(thePerson.name); //Sunmenghua
            console.log(theOtherPerson.friends); // ["Lisi", "wangwu", "zhaoliu", "liulaogen", "Da liu"]         
            console.log(thePerson.friends);//["Lisi", "wangwu", "zhaoliu", "liulaogen", "Da liu"]
            console.log(theOtherPerson.sex); //undefined
    
            console.log(person.name); //zhangsan
            console.log(person.sex); //undefine

    B.接受两个参数

            var person = {
                name: "Sun Menghua",
                friends: ['Liu', 'Wu']
            }
            var thePerson = Object.create(person, {
                name: {
                    value: 'Qi Haiyang '
                },
                age: {
                    value: '19 '
                }
            });
            console.log(thePerson.name); //Qi Haiyang
            //Object.create第二个参数的同名属性会覆盖原型对象上的同名属性;
            console.log(thePerson.age); //19
            var theotherPerson = Object.create(person);
            console.log(theotherPerson.name); //Sun Menghua
            console.log(theotherPerson.age); //undefined
    
            console.log(person.name); //Sun Menghua
            console.log(person.age); //undefined
            //Object.create第二个参数的属性是对象自己的属性,和其他对象不共享d

    基于已有的对象创建新对象

  • 相关阅读:
    ArcEngine:GP使用!没道理的错误!
    XMLHttpRequest的亲密接触(1)——简单讲解
    XMLHttpRequest的亲密接触(2.2)——表单提交
    初入Ajax,需要明确的Web工作原理
    文章收藏明细
    【备忘】Oracle10g 创建、删除表空间、创建、授权用户
    proxool的使用总结
    Java操作压缩与解压缩
    解决jquery ui dialog中调用datepicker时日期选择控件被遮挡的问题
    如何读取jar包中的xml等资源文件
  • 原文地址:https://www.cnblogs.com/sunmarvell/p/8880863.html
Copyright © 2011-2022 走看看