導航:首頁 > 編程語言 > jsobject繼承

jsobject繼承

發布時間:2023-06-15 17:17:51

js中var a=new Object()和var a={}有什麼區別嗎

js里邊一切對象都是從Object繼承來的,當要構建1個空對象時,用new Object()也是常見的一種方法。js的api里只會跟你說Object的幾個屬性和方法,由於這是1個基類,也沒啥意思。

Ⅱ (js)使用new對函數進行構造調用

js中的函數有兩種調用方式,一種是通過普通的聲明之後閉型鍵進行的調用。一種是通過new關鍵字進行構造調用。普通的調用就是依次執行函數內部的函數語句,如果有返回值則返回返回值,如果沒有則函數內部的聲明周期結束。但是,函數還有另一個調用方式,使用new關鍵字,將函數當做構造函數。js中沒有所謂獨立出來的構造函數的概念,所有的函數都用同樣的方式聲明,所以有了new這個關鍵字,js(ES6之前)只能通過這種方式實現構造器的構造。那麼使用new關鍵字跟普通的調用有什麼區別呢?

使用new關鍵字,比普通的函數調用,主要分為以下四個步驟:

稍後我們會對上面的四句話逐一解析,首先我們看一看函數調用的兩種方式:

這樣看來,兩者似乎沒有區別,但是這里要注意,使用new進行構造調用時,函數是有返回值的。

上面的return2並沒有返回一個函數。

其實它會返回一個空的對象。這也就是上面使用new關鍵詞的第一步, 內部創建一個新的空對象

那麼當函數內部有this時,結果會是怎樣轎巧的呢?

使用new關租派鍵字後,在函數內部如果出現了this,則自動將this指向內部新建的對象上。最後返回時,因為this的緣故,對象上新建了a屬性,並且賦值返回。

修正定義的對象Object的[[prototype]]
雖然實例上的[[prototype]]屬性__proto__是ES6才作為規范出版的。但是在這之前chrome已經支持__proto__屬性,他指向對象的原型。

原型的問題相當復雜,單獨拿出來也可以當好幾篇文章的量來講。但是這並不是本文的重點。但是每一個對象從根部來說,繼承自Object。而Object.prototype上面定義了一些方法,有類似toString,valueOf等等等方法。對於對象來說,支持通過屬性鏈和方法鏈向上查詢。所以在一個對象實例中,如果沒有定義toString方法,但它還可以向上查詢,找到原型中的toString方法,進行調用。

同時的,有很多元素通過Object實現繼承。比如Function, Array, RegExp等等對象,它們也是對象,但是卻是繼承來自Object。

在這里,內部定義的對象,讓他繼承來自構造函數。

最後一步,也是最容易被忽略的一步,那就是當構造函數存在返回值時,並且返回值為對象時,返回對象而不返回之前定義的對象。

當然,上面說的Function,Array,RegExp也算Object的一種,如果返回他們同樣也會阻止默認的對象返回。

Ⅲ js中直接輸出一個object對象顯示的是[object Object]是什麼意思

  1. 第一個object代表用戶自定義的對象的屬性。

  2. 第二個object代表用戶自定義的對象的方法。

Ⅳ 怎麼體現javascript的繼承關系

js繼承的概念
js里常用的如下兩種繼承方式:
原型鏈繼承(對象間的繼承)
類式繼承(<a href="https://www..com/s?wd=%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0&tn=44039180_cpr&fenlei=-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd"target="_blank" class="-highlight">構造函數</a>間的繼承)

由於js不像java那樣是真正<a href="https://www..com/s?wd=%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1&tn=44039180_cpr&fenlei=-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd" target="_blank" class="-highlight">面向對象</a>的語言,js是基於對象的,它沒有類的概念。所以,要想實現繼承,可以用js的原型prototype機制或者用apply和call方法去實現
在<a href="https://www..com/s?wd=%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1&tn=44039180_cpr&fenlei=-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd" target="_blank" class="-highlight">面向對象</a>的語言中,我們使用類來創建一個自定義對象。然而js中所有事物都是對象,那麼用什麼辦法來創建自定義對象呢?這就需要用到js的原型:
我們可以簡單的把prototype看做是一個模版,新創建的自定義對象都是這個模版(prototype)的一個拷貝 (實際上不是拷貝而是鏈接,只不過這種鏈接是不可見,新實例化的對象內部有一個看不見的__Proto__指針,指向原型對象)。
js可以通過<a href="https://www..com/s?wd=%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0&tn=44039180_cpr&fenlei=-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd"target="_blank" class="-highlight">構造函數</a>和原型的方式模擬實現類的功能。 另外,js類式繼承的實現也是依靠原型鏈來實現的。
原型式繼承與類式繼承
類式繼承是在子類型<a href="https://www..com/s?wd=%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0&tn=44039180_cpr&fenlei=-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd" target="_blank" class="-highlight">構造函數</a>的內部調用超類型的構造函數。
嚴格的類式繼承並不是很常見,一般都是組合著用:
function Super(){
this.colors=["red","blue"];
}

function Sub(){
Super.call(this);
}

原型式繼承是藉助已有的對象創建新的對象,將子類的原型指向父類,就相當於加入了父類這條原型鏈
原型鏈繼承
為了讓子類繼承父類的屬性(也包括方法),首先需要定義一個構造函數。然後,將父類的新實例賦值給構造函數的原型。代碼如下:
<script>
function Parent(){
this.name = 'mike';
}

function Child(){
this.age = 12;
}
Child.prototype = new Parent();//Child繼承Parent,通過原型,形成鏈條

var test = new Child();
alert(test.age);
alert(test.name);//得到被繼承的屬性
//繼續原型鏈繼承
function Brother(){ //brother構造
this.weight = 60;
}
Brother.prototype = new Child();//繼續原型鏈繼承
var brother = new Brother();
alert(brother.name);//繼承了Parent和Child,彈出mike
alert(brother.age);//彈出12
</script>

以上原型鏈繼承還缺少一環,那就是Object,所有的構造函數都繼承自Object。而繼承Object是自動完成的,並不需要我們自己手動繼承,那麼他們的<a href="https://www..com/s?wd=%E4%BB%8E%E5%B1%9E%E5%85%B3%E7%B3%BB&tn=44039180_cpr&fenlei=-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd" target="_blank" class="-highlight">從屬關系</a>是怎樣的呢?
確定原型和實例的關系
可以通過兩種方式來確定原型和實例之間的關系。操作符instanceof和isPrototypeof()方法:
alert(brother instanceof Object)//true
alert(test instanceof Brother);//false,test 是brother的超類
alert(brother instanceof Child);//true
alert(brother instanceof Parent);//true

只要是原型鏈中出現過的原型,都可以說是該原型鏈派生的實例的原型,因此,isPrototypeof()方法也會返回true
在js中,被繼承的函數稱為超類型(父類,基類也行),繼承的函數稱為子類型(子類,派生類)。使用原型繼承主要由兩個問題:
一是字面量重寫原型會中斷關系,使用引用類型的原型,並且子類型還無法給超類型傳遞參數。
偽類解決引用共享和超類型無法傳參的問題,我們可以採用「借用構造函數」技術
借用構造函數(類式繼承)
<script>
function Parent(age){
this.name = ['mike','jack','smith'];
this.age = age;
}

function Child(age){
Parent.call(this,age);
}
var test = new Child(21);
alert(test.age);//21
alert(test.name);//mike,jack,smith
test.name.push('bill');
alert(test.name);//mike,jack,smith,bill
</script>

借用構造函數雖然解決了剛才兩種問題,但沒有原型,則復用無從談起,所以我們需要原型鏈+借用構造函數的模式,這種模式稱為組合繼承
組合繼承
<script>
function Parent(age){
this.name = ['mike','jack','smith'];
this.age = age;
}
Parent.prototype.run = function () {
return this.name + ' are both' + this.age;
};
function Child(age){
Parent.call(this,age);//對象冒充,給超類型傳參
}
Child.prototype = new Parent();//原型鏈繼承
var test = new Child(21);//寫new Parent(21)也行
alert(test.run());//mike,jack,smith are both21
</script>

組合式繼承是比較常用的一種繼承方法,其背後的思路是 使用原型鏈實現對原型屬性和方法的繼承,而通過借用構造函數來實現對實例屬性的繼承。這樣,既通過在原型上定義方法實現了函數復用,又保證每個實例都有它自己的屬性。
call()的用法:調用一個對象的一個方法,以另一個對象替換當前對象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])

原型式繼承
這種繼承藉助原型並基於已有的對象創建新對象,同時還不用創建自定義類型的方式稱為原型式繼承
<script>
function obj(o){
function F(){}
F.prototype = o;
return new F();
}
var box = {
name : 'trigkit4',
arr : ['brother','sister','baba']
};
var b1 = obj(box);
alert(b1.name);//trigkit4

b1.name = 'mike';
alert(b1.name);//mike

alert(b1.arr);//brother,sister,baba
b1.arr.push('parents');
alert(b1.arr);//brother,sister,baba,parents

var b2 = obj(box);
alert(b2.name);//trigkit4
alert(b2.arr);//brother,sister,baba,parents
</script>

原型式繼承首先在obj()函數內部創建一個臨時性的構造函數 ,然後將傳入的對象作為這個構造函數的原型,最後返回這個臨時類型的一個新實例。
寄生式繼承
這種繼承方式是把原型式+<a href="https://www..com/s?wd=%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F&tn=44039180_cpr&fenlei=-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd" target="_blank" class="-highlight">工廠模式</a>結合起來,目的是為了封裝創建的過程。
<script>
function create(o){
var f= obj(o);
f.run = function () {
return this.arr;//同樣,會共享引用
};
return f;
}
</script>

組合式繼承的小問題
組合式繼承是js最常用的繼承模式,但組合繼承的超類型在使用過程中會被調用兩次;一次是創建子類型的時候,另一次是在子類型構造函數的內部
<script>
function Parent(name){
this.name = name;
this.arr = ['哥哥','妹妹','父母'];
}

Parent.prototype.run = function () {
return this.name;
};

function Child(name,age){
Parent.call(this,age);//第二次調用
this.age = age;
}

Child.prototype = new Parent();//第一次調用
</script>

以上代碼是之前的組合繼承,那麼寄生組合繼承,解決了兩次調用的問題。
寄生組合式繼承
<script>
function obj(o){
function F(){}
F.prototype = o;
return new F();
}
function create(parent,test){
var f = obj(parent.prototype);//創建對象
f.constructor = test;//增強對象
}

function Parent(name){
this.name = name;
this.arr = ['brother','sister','parents'];
}

Parent.prototype.run = function () {
return this.name;
};

function Child(name,age){
Parent.call(this,name);
this.age =age;
}

inheritPrototype(Parent,Child);//通過這里實現繼承

var test = new Child('trigkit4',21);
test.arr.push('nephew');
alert(test.arr);//
alert(test.run());//只共享了方法

var test2 = new Child('jack',22);
alert(test2.arr);//引用問題解決
</script>

call和apply
全局函數apply和call可以用來改變函數中this的指向,如下:
// 定義一個全局函數
function foo() {
console.log(this.fruit);
}

// 定義一個全局變數
var fruit = "apple";
// 自定義一個對象
var pack = {
fruit: "orange"
};

// 等價於window.foo();
foo.apply(window); // "apple",此時this等於window
// 此時foo中的this === pack
foo.apply(pack); // "orange"

閱讀全文

與jsobject繼承相關的資料

熱點內容
java監聽器延時 瀏覽:726
itunes備份包含微信聊天記錄 瀏覽:20
怎麼向虛擬機傳文件 瀏覽:677
win10怎麼用軟體激活不了 瀏覽:816
美版a1453是什麼版本 瀏覽:517
電腦里的文件夾按照拼音歸類 瀏覽:996
文件管理器怎麼把視頻壓縮成文件 瀏覽:477
標准化文件名稱包括哪些 瀏覽:85
win10不能讀取dll文件 瀏覽:882
雲騎士重裝系統找不到usb字樣文件 瀏覽:42
皖事通app社保年限在哪裡看 瀏覽:65
為什麼快影顯示沒網路 瀏覽:356
華為如何讓手機升級提醒紅1消失 瀏覽:345
我愛九九商城app 瀏覽:587
劍靈蒼穹武器升級 瀏覽:248
微信錢包微粒貸 瀏覽:654
滾動字幕屏找不到文件 瀏覽:990
鄭州青少年學編程哪個機構比較好 瀏覽:866
ps文件打開不是彩色的 瀏覽:781
監控硬碟格式化工具 瀏覽:512

友情鏈接