JS物件繼承的一些方法

2021-07-22 23:41:29 字數 2092 閱讀 4545

由於引用型別(陣列、物件)是按位址傳遞,直接拷貝是淺拷貝,即修改拷貝後的變數,原變數也會改變。有時需要深拷貝乙個物件,這時就需要遍歷徹底複製,使原物件和拷貝物件完全脫離關係。

建立例項物件

var o=

}var a=object.create(o);

a.color="blue";

a.arr.push(2);

console.dir(a);

console.dir(o);會改變引用型別的位址

深拷貝,不會改變引用型別的位址

**:function deepcloneobj(obj);

for(i in obj)

}return o;

}實現細節:假定傳入的是乙個引用型別,首先判定傳入的是陣列還是物件,根據判定結果,確定o是初始化為空陣列還是空物件。之後遍歷傳入引用型別的自有屬性,並判定屬性是否為物件,如果是的話做遞迴,否則直接複製給o。

陣列例項:

var arr1 = ["sfsag","akghak","['fafa','gaag','rwet']",125];

console.log(arr1);//["sfsag", "akghak", "['fafa','gaag','rwet']", 125]    var arr2 = deepcloneobj(arr1);

arr1.push("newstr");

console.log(arr1);//["sfsag", "akghak", "['fafa','gaag','rwet']", 125, "newstr"]    console.log(arr2);//["sfsag", "akghak", "['fafa','gaag','rwet']", 125]物件例項:

var obj1 = ,asga:['aff','ghh','wegwer',12],segg:1};

console.log(obj1);//object

var obj2 = deepcloneobj(obj1);

obj1['newstr'] = ['fsg','gsr'];

console.log(obj1);//object

console.log(obj2);//object

原型繼承:

function fn(name)

fn.prototype=

}function ff(color)

ff.prototype = new fn();

ff.prototype.constructor = fn;

只能繼承方法,不能繼承屬性,父級建構函式的引用型別被所有例項共享是我們所不希望的;

3.建構函式繼承

function animal(name)

animal.prototype=

};function cat(color)

var cat = new cat();

cat.lover.push('a');

console.log(cat); 

這種繼承方式可以解決原型繼承存在的問題,但是又產生了乙個新的問題:沒有辦法繼承父級原型中的成員

4 組合繼承:

function fruit(taste,name)

fruit.prototype.sweeter = function()

function watermelon(color,shape,taste,name)

watermelon.prototype = new fruit();//這條**的作用會把原型上的方法都會繼承

// watermelon.prototype = fruit.prototype //不推薦(會對原來的**造成影響)

watermelon.prototype.scroll = function()

5.extend()拷貝方法

//extend作用就是拷貝屬性:把引數物件中的所有屬性都拷貝到extend方法所在的物件裡,如果屬性已經存在那麼就覆蓋掉,如果沒有這個屬性就新增乙個

var obj = ;

obj.extend = function(obj)

};obj.extend();

console.dir(obj);

屬性拷貝(jquery外掛程式擴充套件的本質)

一些繼承方法

什麼是繼承?乙個原本沒有某些方法和功能的物件,用過一些方法拿到另乙個物件的屬性和方法 建構函式的繼承 function fn name var obj1 newfn aaa var obj2 newfn bbb obj1.show obj2.show function father skill fu...

JS繼承的一些見解

js在es6之前的繼承是五花八門的。而且要在專案中靈活運用物件導向寫法也是有點彆扭,更多的時候還是覺得面向過程的寫法更為簡單,效率也高。久而久之對js的繼承每隔一段時間就會理解出現困難。所以這次我要把對物件的理解寫下來,這樣應該就深刻一點了。我們先來看看乙個物件是怎麼生成的 三種建立物件的方法 va...

JS繼承的一些見解

js在es6之前的繼承是五花八門的。而且要在專案中靈活運用物件導向寫法也是有點彆扭,更多的時候還是覺得面向過程的寫法更為簡單,效率也高。久而久之對js的繼承每隔一段時間就會理解出現困難。所以這次我要把對物件的理解寫下來,這樣應該就深刻一點了。我們先來看看乙個物件是怎麼生成的 三種建立物件的方法 va...