快捷導(dǎo)航

JavaScript關(guān)于prototype實(shí)例詳解(超重點(diǎn))

更新時(shí)間：2023年08月30日 09:20:25 作者：生而自由愛而無(wú)畏

prototype是js里面給類增加功能擴(kuò)展的一種模式,這篇文章主要介紹了JavaScript關(guān)于prototype（超重點(diǎn)）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

JavaScript關(guān)于prototype（超重點(diǎn)）

prototype是js里面給類增加功能擴(kuò)展的一種模式.寫個(gè)面向?qū)ο髞?lái)看看.

function People(name, age){
    this.name = name;
    this.age = age;
    this.run = function(){
        console.log(this.name+"在跑")
    }
}
p1 = new People("張三", 18);
p2 = new People("李四", 19);
p1.run();
p2.run();

我現(xiàn)在代碼寫完了. 突然之間, 我感覺好像少了個(gè)功能. 人不應(yīng)該就一個(gè)功能. 光會(huì)跑是不夠的. 還得能夠ooxx. 怎么辦? 直接改代碼? 可以. 但不夠好. 如果這個(gè)類不是我寫的呢? 隨便改別人代碼是很不禮貌的. 也很容易出錯(cuò). 怎么辦? 我們可以在我們自己代碼中對(duì)某個(gè)類型動(dòng)態(tài)增加功能. 此時(shí)就用到了prototype.

function People(name, age){
    this.name = name;
    this.age = age;
    this.run = function(){
        console.log(this.name+"在跑")
    }
}
// 通過(guò)prototype可以給People增加功能
People.prototype.xxoo = function(){
    console.log(this.name+"還可以xxoo");
}
p1 = new People("張三", 18);
p2 = new People("李四", 19);
p1.run();
p2.run();
p1.xxoo();
p2.xxoo();

能看到一些效果了是吧. 也就是說(shuō). 可以通過(guò)prototype給我們的對(duì)象增加一些功能.

接下來(lái). 聊幾個(gè)重要的概念.

1.構(gòu)造器

構(gòu)造一個(gè)對(duì)象的函數(shù). 叫構(gòu)造器.

function People(){  //這個(gè)東西就是構(gòu)造器 constractor
}
var p = new People(); // 調(diào)用構(gòu)造器
p.constractor == People; // true

2.原型對(duì)象

每一個(gè)js對(duì)象中. 都有一個(gè)隱藏屬性 __proto__ 指向該對(duì)象的 原型對(duì)象 . 在執(zhí)行該對(duì)象的方法或者查找屬性時(shí). 首先, 對(duì)象自己是否存在該屬性或者方法. 如果存在, 就執(zhí)行自己的. 如果自己不存在. 就去找 原型對(duì)象 .

function Friend(){
    this.chi = function(){
        console.log("我的朋友在吃");
    }
}
Friend.prototype.chi = function(){
    console.log("我的原型在吃")
}
f = new Friend();
f.chi(); // 此時(shí). 該對(duì)象中. 有chi這個(gè)方法.  同時(shí), 它的原型對(duì)象上, 也有chi這個(gè)方法.
// 運(yùn)行結(jié)果:
// 我的朋友在吃

3.prototype 和 __proto__ 有什么關(guān)系?

在js中. 構(gòu)造器的prototype屬性和對(duì)象的 __proto__ 是一個(gè)東西. 都是指向這個(gè) 原型對(duì)象 .

f.__proto__ === Friend.prototype   // true

4.原型鏈

這個(gè)比較繞了. 我們從前面的學(xué)習(xí)中, 了解到. 每個(gè)對(duì)象身體里. 都隱藏著 __proto__ 也就是它的 原型對(duì)象 . 那么我們看哈, 原型對(duì)象 也是 對(duì)象 啊, 那么也就是說(shuō). 原型對(duì)象 也有 __proto__ 屬性.

類似于.....這樣:

f.__proto__.__proto__

打印出來(lái)的效果是這樣的:

此時(shí). 又出現(xiàn)一堆看不懂的玩意. 這些玩意是什么? 這些其實(shí)是Object的原型.

f.__proto__.__proto__ === Object.prototype

所以, 我們?cè)趫?zhí)行 f.toString() 的時(shí)候不會(huì)報(bào)錯(cuò). 反而可以正常運(yùn)行. 原因就在這里.

執(zhí)行過(guò)程: 先找 f對(duì)象 中是否有 toString . 沒(méi)有, 找它的 原型對(duì)象 . 原型對(duì)象 中沒(méi)有, 繼續(xù)找 原型對(duì)象的原型對(duì)象 . 直至你找到Object的原型為止. 如果還是沒(méi)有. 就報(bào)錯(cuò)了.

f.hahahahahahah()  // 報(bào)錯(cuò).

綜上, 原型鏈?zhǔn)莏s 方法查找的路徑指示標(biāo) .

5. 我們用原型鏈能做什么?(每日一惡心)

我們來(lái)看一段神奇的代碼.

(function(){debugger})();

這樣一段代碼可以看到. 瀏覽器進(jìn)入了debugger斷點(diǎn).

那么這段代碼的背后是什么呢? 注意. 在js代碼執(zhí)行時(shí). 每一個(gè)function的對(duì)象都是通過(guò)Function()來(lái)創(chuàng)建的. 也就是說(shuō). 函數(shù)是Function()的對(duì)象.

function fn(){}
console.log(fn.proto.constructor); // ƒ Function() { [native code] }

那么這段代碼的背后是什么呢? 注意. 在js代碼執(zhí)行時(shí). 每一個(gè)function的對(duì)象都是通過(guò)Function()來(lái)創(chuàng)建的. 也就是說(shuō). 函數(shù)是Function()的對(duì)象.

function fn(){}
console.log(fn.__proto__.constructor); // ? Function() { [native code] }

函數(shù)就是Function的對(duì)象. 那么. 我們可以通過(guò)Function來(lái)構(gòu)建一個(gè)函數(shù).

new Function('debugger')();

OK. 這東西對(duì)我們來(lái)說(shuō)有什么用. 上代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="haha.js"></script>
  <script>
    txsdefwsw();
  </script>
</head>
<body>
    有內(nèi)鬼. 終止交易
</body>
</html>

haha.js 中的內(nèi)容如下:

function txsdefwsw() {
    var r = "V", n = "5", e = "8";
    function o(r) {
        if (!r) return "";
        for (var t = "", n = 44106, e = 0; e < r.length; e++) {
            var o = r.charCodeAt(e) ^ n;
            n = n * e % 256 + 2333, t += String.fromCharCode(o)
        }
        return t
    }
    try {
        var a = ["r", o("?"), "g", o("?"), function (t) {
            if (!t) return "";
            for (var o = "", a = r + n + e + "7", c = 45860, f = 0; f < t.length; f++) {
                var i = t.charCodeAt(f);
                c = (c + 1) % a.length, i ^= a.charCodeAt(c), o += String.fromCharCode(i)
            }
            return o
        }("@"), "b", "e", "d"].reverse().join("");
        !function c(r) {
            (1 !== ("" + r / r).length || 0 === r) && function () {
            }.constructor(a)(), c(++r)
        }(0)
    } catch (a) {
        setTimeout(txsdefwsw, 100);
    }
}

頁(yè)面跑起來(lái)沒(méi)什么問(wèn)題. 但是會(huì)無(wú)限debugger;

解決方案:

找到斷點(diǎn)出. 右鍵-> never pause here;
寫js hook代碼;

var x = Function; // 保留原來(lái)的Function
  Function = function(arg){
  	arg = arg.replace("debugger", "");
  	return new x(arg);
  }
  var qiaofu_function_constructor = (function(){}).__proto__.constructor;
  (function(){}).__proto__.constructor = function(arg){
  	console.log("我愛你大大");
  	if(arg ==='debugger'){
  		return function(){}
  	} else {
  		return new qiaofu_function_constructor(arg);
  	}
  }

[[prototype]]
__proto__
構(gòu)造器.prototype
function jiami(){
}
jiami.prototype.md5 = function(){}
jiami.prototype.aes = function(){}
jiami.prototype.encrypt = function(){}
var s = new jiami();
s.md5();

到此這篇關(guān)于JavaScript關(guān)于prototype（超重點(diǎn)）的文章就介紹到這了,更多相關(guān)js 關(guān)于prototype內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: