zoukankan      html  css  js  c++  java
  • 普通对象如何继承?

    普通对象的继承方法

    今天有个朋友给问我 var obj1 = {},var obj2 = obj1,如何能做到改变obj2的属性值而obj1里面的值。

    大家都知道,这方法涉及到了对象的引用,使用的是同一块内存,所以呢就会你变我也变。说到这里很明显,我们需要重新申请一块地方来放obj2的东西,我就说继承和new,那么下面我来说说 普通对象是如何做到继承

    方法一:单一属性继承 , 普通对象赋值实现继承  

     1 var obj1 = {
     2     name :'a',
     3 };
     4 var obj2 = {
     5     name : obj1.name,
     6 };
     7 
     8 console.log(obj2.name); //a
     9 obj2.name = 'b';
    10 
    11 console.log(obj1.name); //a
    12 console.log(obj2.name); //b

    方法二:利用构造函数原型继承

     1 var obj1 = {
     2     'name' :'a'
     3 }
     4 //继承函数
     5 function extend(obj){
     6     function Fn(){};//创建构造函数
     7     Fn.prototype = obj; //把被继承的对象赋值给Fn的prototype
     8     return new Fn();//返回值是 实例化Fn
     9 }
    10 var obj2 = extend(obj1); //相当于var obj2 = new Fn();
    11 
    12 console.log(obj2.name);// a
    13 
    14 obj2.name = 'b'; //改变属性
    15 obj2.age = 18 ;  //给obj2添加一个属性
    16 
    17 console.log(obj1.name+' '+obj1.age); //a undefined
    18 console.log(obj2.name+' '+ obj2.age); //b  18

    方法三:浅拷贝 --核心for in ,在之前的 “jq的extend” 方法中提到这个概念,只说到了使用方法,现在来说模拟一下实现原理

     很明显,之前一样,如果obj1的name 属性是一个对象或者数组那么,此时继承仅仅是一个地址,比如有个属性 person:{name:'aa',age:18},那么当obj2或者obj1去改变

     里面的name 或者是 age的时候 ,则obj1和obj2都会发生改变。详细请看:http://www.cnblogs.com/NTWang/p/6175773.html

     1 var obj1 = {
     2     'name' :'a',
     3 }
     4 function extend(obj){
     5     var obj2 = {}; //声明一个空对象
     6     for(var i in obj){
     7         obj2[i] = obj[i]; //循环赋值
     8     }
     9     return obj2;
    10 }
    11 var obj2 = extend(obj1);//函数执行并赋值给变量
    12 
    13 console.log(obj2.name)// a
    14 obj2.name = 'b';
    15 
    16 console.log(obj1.name);//a 
    17 console.log(obj2.name);//b

    方法四:深拷贝,完善浅拷贝,两种方法适用不同的需求,它的实现原理是:递归调用浅拷贝方法

     1 var obj1 = {
     2     person:{name:'xiaoming',age:18}
     3 }
     4 
     5 function deepCopy(obj){
     6     //判断obj 是是否是对象,不是则直接return
     7     if (typeof obj != 'object') {
     8         return obj;
     9     }
    10     var obj2 = {};//声明一个对象
    11 
    12     for(var i in obj){
    13         obj2[i] = deepCopy(obj[i]);//调用自己
    14     }
    15     return obj2;
    16 }
    17 
    18 var obj2 = deepCopy(obj1);
    19 
    20 obj2.person.name = 'xiaohong';
    21 
    22 console.log(obj1.person.name); //xiaoming
    23 console.log(obj2.person.name);//xiaohong
  • 相关阅读:
    GridView中CheckBox,RadioButton并存的同时且有相互关系
    SQL重复记录查询
    TextArea的长度限定
    如何获取程序当前目录
    手机归属地查询
    如何更改ComboBox下拉列表的文字颜色
    世界上主要的一些搜索引擎
    WF/WCF/WCS/WPF/MVC/AJAX/RBAC/SOAP/SCRUM
    .Net Framework 3.5 结构图
    如何打开网页链接
  • 原文地址:https://www.cnblogs.com/NTWang/p/6215615.html
Copyright © 2011-2022 走看看