js中繼承（拷貝）的幾種常用方法

尋尋覓覓，尋尋覓覓，你終於找到了這兒。話不多說，直接開擼，我們先從最簡單的淺拷貝開始

這裡關於淺拷貝，我總結了三種方法，我們先來定義兩個物件

var person=
}var prog=

1、通過 for 迴圈來實現

function extend(p,c);
for(var prop in p)
}extend(person,prog);

2.通過object.assign實現淺拷貝

object.assign(prog,person);

3.通過...擴充套件運算子來實現

prog=;

這種方式的繼承，缺點很明顯，就是當父物件中的屬性是乙個物件或陣列等之類的引用資料型別的時候，改變子也會改變父，因為是對其的乙個引用。

prog.add.c='66';    
console.log(person.add.c); //66 ===>是對add的乙個引用

1、遞迴呼叫

var person=
}var prog=
// 1.通過遞迴實現
function extend(p,c);
for(let i in p); //這裡不考慮函式型別
extend(p[i],c[i])
}else
}}extend(person,prog)

2.通過 json.parse(json.stringify(object))來實現

var person=
}var prog=
object.assign(prog,json.parse(json.stringify(person)))
//2.擴充套件運算子
prog=

但是該方法也是有侷限性的：

會忽略undefined會忽略symbol不能序列化函式

不能解決迴圈引用的物件

其實實現乙個深拷貝是很困難的，需要我們考慮好多種邊界情況（我們的遞迴方法就忽略了函式型別），比如原型鏈如何處理、dom 如何處理等等，如果在開發中推薦使用 lodash 的深拷貝函式。

3、通過 lodash 的深拷貝函式來實現

const clonedeep = require('loadsh/clonedeep')
var person=,
val:function()
}var prog=
prog = object.assign(prog,clonedeep(person))

下面我們來擴充套件一下：

函式式繼承

function parent()
}function child()
var c=new child()

原型鏈方式的繼承

var obj=
function extend();
function f(){};
f.prototype=obj; //原型物件的賦值一定要寫在例項化物件之前
init=new f();
return init;
}var c=extend();
console.log(c.name) //liuhua

es5提供的object.create(proto, [propertiesobject])

該方法建立乙個新物件，使用現有的物件來提供新建立的物件的proto。

var p=
var c=object.create(p,}) //這裡給c1增加屬性，必須通過這種規範新增,新新增的屬性預設不可列舉
// console.log(c.name,c.age)
// console.log(c) //

js 中繼承的幾種方式

繼承的方式一共有三種一原型繼承通過prototype 來實現繼承。function person name,age person.prototype.sayhello function var per new person 馬小倩 21 per.sayhello 輸出使用原型得到name 馬...

js 中繼承的幾種方式

JS中繼承的實現

js從誕生之初本就不是物件導向的語言。如何在js中實現繼承，總結而言會有四種寫法。function animal name function dog name,hobby this.hobby hobby let dog1 new dog xiaohei bone let dog2 new dog ...

js中繼承（拷貝）的幾種常用方法

js 中繼承的幾種方式

js 中繼承的幾種方式

JS中繼承的實現

相關推薦