亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

您好,關于JavaScript非構造函數的繼承的問題!

您好,關于JavaScript非構造函數的繼承的問題!

蝴蝶不菲 2021-10-06 11:07:25
function deepCopy(p, c) {var c = c || {};for (var i in p) {if (typeof p[i] === 'object') {c[i] = (p[i].constructor === Array) ? [] : {};deepCopy(p[i], c[i]);} else {c[i] = p[i];}}return c;}var Chinese = {nation:'中國'};Chinese.birthPlaces = ['北京','上海','香港'];var Doctor = deepCopy(Chinese);console.log(Chinese);Doctor.birthPlaces.push('廈門');console.log(Doctor.birthPlaces);//["北京", "上海", "香港", "廈門"]console.log(Chinese.birthPlaces);//["北京", "上海", "香港"]各位大神,我是新手,這里我的理解是這樣的,可以幫我看看我的思路對不對嗎1.c是object2.遍歷(第一個是string,所以 c[i] = p[i])(第二個是數組,由于數組的typeof是object,p[1]的構造器是數組,如果是則用[],如果不是則用{},結果是用[])3.把p[1]和c[1]作為實參放進函數里面運行4.這時c=[];p[1]是["北京", "上海", "香港"],然后遍歷p[1],p[1][i]是string,所以運行else,因此c[i]=p[1][i],也就是c[1]=["北京", "上海", "香港"]。5.當c[1].push('廈門'),c[1]=["北京", "上海", "香港","廈門"]。所以不影響p[1].
查看完整描述

2 回答

?
冉冉說

TA貢獻1877條經驗 獲得超1個贊

 對象之間的"繼承"的五種方法。
  比如,現在有一個"動物"對象的構造函數。
  function Animal(){
  this.species = "動物";
  }
  還有一個"貓"對象的構造函數。
  function Cat(name,color){
  this.name = name;
  this.color = color;
  }
  怎樣才能使"貓"繼承"動物"呢?
  一、 構造函數綁定
  第一種方法也是最簡單的方法,使用call或apply方法,將父對象的構造函數綁定在子對象上,即在子對象構造函數中加一行:
  function Cat(name,color){
  Animal.apply(this, arguments);
  this.name = name;
  this.color = color;
  }
  var cat1 = new Cat("大毛","黃色");
  alert(cat1.species); // 動物
  二、 prototype模式
  第二種方法更常見,使用prototype屬性。
  如果"貓"的prototype對象,指向一個Animal的實例,那么所有"貓"的實例,就能繼承Animal了。
  Cat.prototype = new Animal();
  Cat.prototype.constructor = Cat;
  var cat1 = new Cat("大毛","黃色");
  alert(cat1.species); // 動物
  代碼的第一行,我們將Cat的prototype對象指向一個Animal的實例。
  Cat.prototype = new Animal();
  它相當于完全刪除了prototype 對象原先的值,然后賦予一個新值。但是,第二行又是什么意思呢?
  Cat.prototype.constructor = Cat;
  原來,任何一個prototype對象都有一個constructor屬性,指向它的構造函數。如果沒有"Cat.prototype = new Animal();"這一行,Cat.prototype.constructor是指向Cat的;加了這一行以后,Cat.prototype.constructor指向Animal。
  alert(Cat.prototype.constructor == Animal); //true
  更重要的是,每一個實例也有一個constructor屬性,默認調用prototype對象的constructor屬性。
  alert(cat1.constructor == Cat.prototype.constructor); // true
  因此,在運行"Cat.prototype = new Animal();"這一行之后,cat1.constructor也指向Animal!
  alert(cat1.constructor == Animal); // true
  這顯然會導致繼承鏈的紊亂(cat1明明是用構造函數Cat生成的),因此我們必須手動糾正,將Cat.prototype對象的constructor值改為Cat。這就是第二行的意思。
  這是很重要的一點,編程時務必要遵守。下文都遵循這一點,即如果替換了prototype對象,
  o.prototype = {};
  那么,下一步必然是為新的prototype對象加上constructor屬性,并將這個屬性指回原來的構造函數。
  o.prototype.constructor = o;
  三、 直接繼承prototype
  第三種方法是對第二種方法的改進。由于Animal對象中,不變的屬性都可以直接寫入Animal.prototype。所以,我們也可以讓Cat()跳過 Animal(),直接繼承Animal.prototype。
  現在,我們先將Animal對象改寫:
  function Animal(){ }
  Animal.prototype.species = "動物";
  然后,將Cat的prototype對象,然后指向Animal的prototype對象,這樣就完成了繼承。
  Cat.prototype = Animal.prototype;
  Cat.prototype.constructor = Cat;
  var cat1 = new Cat("大毛","黃色");
  alert(cat1.species); // 動物
  與前一種方法相比,這樣做的優點是效率比較高(不用執行和建立Animal的實例了),比較省內存。缺點是 Cat.prototype和Animal.prototype現在指向了同一個對象,那么任何對Cat.prototype的修改,都會反映到Animal.prototype。
  所以,上面這一段代碼其實是有問題的。請看第二行
  Cat.prototype.constructor = Cat;
  這一句實際上把Animal.prototype對象的constructor屬性也改掉了!
  alert(Animal.prototype.constructor); // Cat
  四、 利用空對象作為中介
  由于"直接繼承prototype"存在上述的缺點,所以就有第四種方法,利用一個空對象作為中介。
  var F = function(){};
  F.prototype = Animal.prototype;
  Cat.prototype = new F();
  Cat.prototype.constructor = Cat;
  F是空對象,所以幾乎不占內存。這時,修改Cat的prototype對象,就不會影響到Animal的prototype對象。
  alert(Animal.prototype.constructor); // Animal
  我們將上面的方法,封裝成一個函數,便于使用。
  function extend(Child, Parent) {
  var F = function(){};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
  Child.prototype.constructor = Child;
  Child.uber = Parent.prototype;
  }
  使用的時候,方法如下
  extend(Cat,Animal);
  var cat1 = new Cat("大毛","黃色");
  alert(cat1.species); // 動物
  這個extend函數,就是YUI庫如何實現繼承的方法。
  另外,說明一點,函數體最后一行
  Child.uber = Parent.prototype;
  意思是為子對象設一個uber屬性,這個屬性直接指向父對象的prototype屬性。(uber是一個德語詞,意思是"向上"、"上一層"。)這等于在子對象上打開一條通道,可以直接調用父對象的方法。這一行放在這里,只是為了實現繼承的完備性,純屬備用性質。
  五、 拷貝繼承
  上面是采用prototype對象,實現繼承。我們也可以換一種思路,純粹采用"拷貝"方法實現繼承。簡單說,如果把父對象的所有屬性和方法,拷貝進子對象,不也能夠實現繼承嗎?這樣我們就有了第五種方法。
  首先,還是把Animal的所有不變屬性,都放到它的prototype對象上。
  function Animal(){}
  Animal.prototype.species = "動物";
  然后,再寫一個函數,實現屬性拷貝的目的。
  function extend2(Child, Parent) {
  var p = Parent.prototype;
  var c = Child.prototype;
  for (var i in p) {
  c[i] = p[i];
  }
  c.uber = p;
  }
  這個函數的作用,就是將父對象的prototype對象中的屬性,一一拷貝給Child對象的prototype對象。
  使用的時候,這樣寫:
  extend2(Cat, Animal);
  var cat1 = new Cat("大毛","黃色");
  alert(cat1.species); // 動物
  非構造函數的繼承
  一、什么是"非構造函數"的繼承?
  比如,現在有一個對象,叫做"中國人"。
  var Chinese = {
  nation:'中國'
  };
  還有一個對象,叫做"醫生"。
  var Doctor ={
  career:'醫生'
  }
  請問怎樣才能讓"醫生"去繼承"中國人",也就是說,我怎樣才能生成一個"中國醫生"的對象?
  這里要注意,這兩個對象都是普通對象,不是構造函數,無法使用構造函數方法實現"繼承"。
  二、object()方法
  json格式的發明人Douglas Crockford,提出了一個object()函數,可以做到這一點。
  function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
  }
  這個object()函數,其實只做一件事,就是把子對象的prototype屬性,指向父對象,從而使得子對象與父對象連在一起。
  使用的時候,第一步先在父對象的基礎上,生成子對象:
  var Doctor = object(Chinese);
  然后,再加上子對象本身的屬性:
  Doctor.career = '醫生';
  這時,子對象已經繼承了父對象的屬性了。
  alert(Doctor.nation); //中國
  三、淺拷貝
  除了使用"prototype鏈"以外,還有另一種思路:把父對象的屬性,全部拷貝給子對象,也能實現繼承。
  下面這個函數,就是在做拷貝:
  function extendCopy(p) {
  var c = {};
  for (var i in p) {
  c[i] = p[i];
  }
  c.uber = p;
  return c;
  }
  使用的時候,這樣寫:
  var Doctor = extendCopy(Chinese);
  Doctor.career = '醫生';
  alert(Doctor.nation); // 中國
  但是,這樣的拷貝有一個問題。那就是,如果父對象的屬性等于數組或另一個對象,那么實際上,子對象獲得的只是一個內存地址,而不是真正拷貝,因此存在父對象被篡改的可能。
  請看,現在給Chinese添加一個"出生地"屬性,它的值是一個數組。
  Chinese.birthPlaces = ['北京','上海','香港'];
  通過extendCopy()函數,Doctor繼承了Chinese。
  var Doctor = extendCopy(Chinese);
  然后,我們為Doctor的"出生地"添加一個城市:
  Doctor.birthPlaces.push('廈門');
  發生了什么事?Chinese的"出生地"也被改掉了!
  alert(Doctor.birthPlaces); //北京, 上海, 香港, 廈門
  alert(Chinese.birthPlaces); //北京, 上海, 香港, 廈門
  所以,extendCopy()只是拷貝基本類型的數據,我們把這種拷貝叫做"淺拷貝"。這是早期jQuery實現繼承的方式。
  四、深拷貝
  所謂"深拷貝",就是能夠實現真正意義上的數組和對象的拷貝。它的實現并不難,只要遞歸調用"淺拷貝"就行了。
  function deepCopy(p, c) {
  var c = c || {};
  for (var i in p) {
  if (typeof p[i] === 'object') {
  c[i] = (p[i].constructor === Array) ? [] : {};
  deepCopy(p[i], c[i]);
  } else {
  c[i] = p[i];
  }
  }
  return c;
  }
  使用的時候這樣寫:
  var Doctor = deepCopy(Chinese);
  現在,給父對象加一個屬性,值為數組。然后,在子對象上修改這個屬性:
  Chinese.birthPlaces = ['北京','上海','香港'];
  Doctor.birthPlaces.push('廈門');
  這時,父對象就不會受到影響了。
  alert(Doctor.birthPlaces); //北京, 上海, 香港, 廈門
  alert(Chinese.birthPlaces); //北京, 上海, 香港
  目前,jQuery庫使用的就是這種繼承方法。



查看完整回答
反對 回復 2021-10-10
?
精慕HU

TA貢獻1845條經驗 獲得超8個贊

函數(方法Function)是對js操作過程的封裝,以后操作同樣的過程,只要調用相應的函數(方法)即可。對象同樣是對js代碼封裝,不過對象可以封裝函數(方法)。比如把某一類的函數(方法)都封裝到某個對象中

查看完整回答
反對 回復 2021-10-10
  • 2 回答
  • 0 關注
  • 249 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號