繼承 · 前端題

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> // 繼承 var obj = { a:1, b:{ c:3 } } var obj1 = { d:4 } deepCopy(obj1, obj); function deepCopy(target, source){ for(var k in source){ if(typeof source[k] == 'object'){ if(Array.isArray(source[k])){ target[k] = []; }else{ target[k] = {}; } deepCopy(target[k], source[k]); }else{ target[k] = source[k]; } }; } </script> </body> </html> ``` ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> // 繼承 var obj = { a:1, b:{ c:3 } } var obj1 = { d:4 } // new函數生成的對象可以訪問函數的prototype // 對象是可以訪問他的__proto__ obj1.__proto__ = obj console.log(obj1); </script> </body> </html> ``` ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> // 繼承 var obj = { a:1, b:{ c:3 } } // Object.create就相當于方法2 __proto__，但是更加清晰明了 var obj1 = Object.create(obj); console.log(obj1); </script> </body> </html> ``` ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> // 繼承 function Animal(age, name) { this.type = '動物'; this.age = age; this.name = name; } Animal.prototype.getType = function (){ return this.type; } // 靜態屬性或者靜態方法 Animal.x = 1; function Cat(age, name) { // 執行他父親的構造函數，繼承了他的一些屬性 Animal.call(this, age, name); } Cat.prototype.say = function (){ console.log('喵喵！'); } // 利用原型繼承父親的一些方法和屬性 // Cat.prototype.__proto__ = Animal.prototype; // 跟上面代碼等價 Object.setPrototypeOf(Cat.prototype, Animal.prototype); // Cat.__proto__ = Animal; // 上下等價 Object.setPrototypeOf(Cat, Animal); var c1 = new Cat(7, '加菲貓'); console.log(c1); </script> </body> </html> ```