(六)前端面試 物件導向

2021-09-25 10:13:05 字數 2669 閱讀 3174

文章內容參考自《前端跳槽面試必備技巧》 

/**

* 類的宣告

*/function animal()

/*** es6中的類宣告

*/class animal2

} /**

* 例項化

*/console.log(new animal(), new animal2()); // 如果沒有引數,可以省略括號,即new animal

(1)es6實現繼承

/**

* es6 繼承

*/class animalchildren extends animal2

} console.log((new animalchildren()).add()); // name

這個比較簡單,不用太多介紹

(2)借助建構函式實現繼承

/**

* 1.借助建構函式實現繼承

*/function parent1()

parent1.prototype.say = function () {}; // 無法繼承此原型物件上的方法或屬性

function child1()

// console.log(new child1(), new child1().say()); // new child1().say()無法執行

這個方法有個缺點就是無法繼承此原型物件上的方法或屬性

(3)借助原型鏈實現繼承

/**

* 2.借助原型鏈實現繼承

*/function parent2()

function child2()

child2.prototype = new parent2(); // child2的原型物件賦值為parent2的例項

console.log(new child2());

var s1 = new child2();

var s2 = new child2();

console.log(s1.play, s2.play); // [1, 2, 3] [1, 2, 3]

s1.play.push(4); // 會改變s2的值 原因:s1.__proto__ === s2.__proto__

console.log(s1.play, s2.play); // [1, 2, 3, 4] [1, 2, 3, 4]

這種方法的缺點就在於,改變某個子類例項中存在於父類中的方法或屬性,會導致其子類的所有例項跟著發生改變

(4)組合方式實現

/**

* 3.組合方式實現繼承

*/function parent3()

function child3()

child3.prototype = new parent3(); // 缺點:parent3.call(this)時,parent3已經執行了一次,這裡parent3又執行一次

var s3 = new child3();

var s4 = new child3();

s3.play.push(4);

console.log(s3.play, s4.play);

(5)組合方式優化

/**

* 組合繼承的優化1

*/function parent4()

function child4()

child4.prototype = parent4.prototype;

var s5 = new child4();

var s6 = new child4();

s5.play.push(4);

console.log(s5.play, s6.play);

// 判斷s5是誰例項化的例項

console.log(s5 instanceof child4, s5 instanceof parent4); // true true 無法判斷

console.log(s5.__proto__.constructor === child4, s5.__proto__.constructor === parent4); // false true

/*** 組合繼承的優化2(最終版)

*/function parent5()

function child5()

child5.prototype = object.create(parent5.prototype); // 建立乙個中間物件在賦值給child5.prototype

child5.prototype.constructor = child5; // 必要

var s7 = new child5();

console.log(s7 instanceof child5, s7 instanceof parent5); // true true 無法判斷

console.log(s7.__proto__.constructor === child5, s7.__proto__.constructor === parent5); // true false

前端面試 前端面試總結2018 07

2周面試了11家公司吧,具體面試題如下 面試第一周 7.23 7.27 中谷芯厚建 蘇寧vivo外包 電面 杭州通策會 第二週 7.30 8.3 南京軟體谷研究院 烽火科技 邁特望,蘇寧外包 電面 平安科技外包 華泰 外包 一輪 技術面,二輪現場技術面 三隻松鼠 電面 一.中谷芯 二.厚建 angu...

前端面試 前端面試題300道

jsonp是如何產生的 1 乙個眾所周知的問題,ajax直接請求普通檔案存在跨域無許可權問題,甭管你是靜態頁面 動態頁面 web伺服器,wcf,只要是跨域請求,一律不准。2 不過我們又發現,web頁面上呼叫js檔案時則不受是否跨域的影響 不僅如此,我們還發現凡是擁有 src 這個屬性的標籤都擁有跨域...

前端面試整合

1.befor和 befor區別 1 相同點 都可以用來表示偽類物件,設定物件前面的內容 befor和 befor是等效的 2 不同點 befor是css2的寫法,befor是css3的寫法。css2的相容性好 h5開發中用 befor好 但冒號是css3偽類。雙冒號表示偽元素 2.盒模型 box ...