原型鏈複習參考

2021-08-15 21:36:35 字數 3550 閱讀 4287

//自己去看方法總結

function

fn()

fn.prototype.getx = function

() ;

fn.prototype.gety = function

() ;

var f1 = new fn;

//檢測某乙個函式是否是乙個類的例項 用instanceof

var f2 = new fn;

//1.所有的函式資料型別(普通函式、類)都天生自帶乙個屬性:prototype,它儲存的值是乙個物件資料型別的值,瀏覽器會預設為其開闢乙個堆記憶體

//2. 在瀏覽器給prototype預設開闢的這個堆記憶體上有個乙個預設的屬性constructor 指向當前類本身

//3. 每個物件資料型別(普通的物件、陣列、正則、例項、prototype)都天生自帶乙個屬性__proto__,指向當前例項所屬類的原型

//2.關於原型鏈的this問題

function

fn()

}fn.prototype.getx = function

() ;

var f1 = new fn;

f1.getx();

f1.__proto__.getx();

var f2 = new fn;

//1、看方法執行的時候,"."前面是誰,this就是誰

//2、把函式體重的this替換成分析的結果

//3、按照原型鏈的查詢模式找到對應的值即可

//function

fn()

}fn.prototype.getx = function

() ;

fn.prototype.setx = function

(n) ;

var f1 = new fn;

f1.getx();//this ->f1,console.log(f1.x)->100

f1.__proto__.getx();//this->f1.__proto__,console.log(f1.__proto__.x)->undefined (略過私有的到了公有的 公有的上沒有x 所以為undefined)

fn.prototype.setx(300);//this->fn.prototype,fn.prototype.x = 300

f1.getx();// 100

f1.__proto__.getx();// 300

f1.setx(500);//this ->f1 ->f1.x = 500;把私有的修改為500

f1.y = 300;//給f1自己本身增加了乙個私有y屬性,屬性值為300,與f1無關

f1.__proto__.y = 1000;//在原型上增加了乙個y屬性,y的屬性值為1000;與f2有關了,因為是原型上的

//3、在內建類的原型上擴充套件方法

var ary = [12,23,34];

//要模擬pop

array.prototype.pop = function

() ;

ary.pop();//this ->ary

console.log(ary);

ary.__proto__.pop();//this -> ary.__proto__ -> array.prototype

console.log(ary);

//基於陣列原型新增乙個數字去重的方法

//基於內建類的原型擴充套件方法,我們需要注意的事項,我們自己編寫的方法名最好加上特殊字首,放置把內建的方法覆蓋掉

array.prototype.myunique = function

unique

() ;

for(var i = 0; i obj[cur] = cur;

}obj = null;

return

this;//實現鏈式寫法的辦法

};ary.unique();

ary.sort(function

(a,b) ).reverse().slice(0,5).pop();//鏈式寫法

//鏈式寫法核心原理:不僅得到了想要的結果,而且返回值還需要時當前這個類的例項,只有這樣才能一直鏈下去

//reverse()翻轉排序

console.log(ary);

ary.myunique().sort(function

(a,b) );

//思考題 1.基於number內之類擴充套件的兩個方法plus,minus

// (5).plus(3).minus(2) 5+3-2 = 6

// 2.slice這個方法實現的非常強大,我們自己寫乙個myslice實現和slice一模一樣的方法(要求陣列中現有的方法乙個都不能用)

//slice(n,m)

//slice(n) slice(0)

//n和m是負數

//n>m是負數

//n或m超出了整個陣列的範圍

//批量設定原型的公共方法

function

fn()

fn.prototype.a = function

() ;

fn.prototype.b = function

() ;

fn.prototype.c = function

() ;

//第一種辦法, 給fn.prototype起乙個小名

var pro = fn.prototype;

pro.a = function

() ;

pro.b = function

() ;

pro.c = function

() ;

//第二個辦法 自己重構

fn.prototype = ,

c:function

() };

var f = new fn;

f.a();//undefined

//1、如果之前原型上存在一些方法的話,我們現在新建立的這個物件會把之前寫的那些方法都給覆蓋掉,所以瀏覽器內建類是禁止自己建立乙個新物件擴充套件原型方法的,防止我們array.prototype={}把內建方法都幹沒了

//2、自己建立的物件中不會天生自帶constructor,所以導致了我們f.constructor 的結果是object而不是我們認為的fn了

array.prototype={};//所有的內建類都不支援直接覆蓋

script>

body>

html>

JS複習 繼承 原型鏈

繼承 介面繼承和實現繼承。介面繼承只繼承方法簽名,而實現繼承則繼承實際的方法。由於函式沒有簽名,在esmascript中無法實現介面繼承。esmascript只支援實現繼承,而且其實現繼承主要是依靠 原型鏈來實現的。原型鏈 基本思想 利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法。建構函式 原...

JS複習 原型鏈小結

一段簡單 引入 1.概念簡單理解 foo.prototype.constructor console.log foo.prototype.constructor foo true console.log f1.proto foo.prototype true console.log f1.proto...

原型 原型鏈

var animal function var dog function animal.price 2000 dog.prototype animal var tidy new dog console.log dog.price 為什麼輸出 undefined console.log tidy.pr...