13 JavaScript关于prototype（超重点）

prototype是js里面给类增加功能扩展的一种模式.

写个面向对象来看看.

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();

我现在代码写完了. 突然之间, 我感觉好像少了个功能. 人不应该就一个功能. 光会跑是不够的. 还得能够ooxx. 怎么办? 直接改代码? 可以. 但不够好. 如果这个类不是我写的呢? 随便改别人代码是很不礼貌的. 也很容易出错. 怎么办? 我们可以在我们自己代码中对某个类型动态增加功能. 此时就用到了prototype.

function People(name, age){

    this.name = name;

    this.age = age;

    this.run = function(){

        console.log(this.name+"在跑")

    }

}

// 通过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();

能看到一些效果了是吧. 也就是说. 可以通过prototype给我们的对象增加一些功能.

接下来. 聊几个重要的概念.

  1. 构造器

    构造一个对象的函数. 叫构造器.
function People(){  //这个东西就是构造器 constractor

}

var p = new People(); // 调用构造器

p.constractor == People; // true
  1. 原型对象

    每一个js对象中. 都有一个隐藏属性__proto__指向该对象的原型对象. 在执行该对象的方法或者查找属性时. 首先, 对象自己是否存在该属性或者方法. 如果存在, 就执行自己的. 如果自己不存在. 就去找原型对象.
function Friend(){

    this.chi = function(){

        console.log("我的朋友在吃");

    }

}

Friend.prototype.chi = function(){

    console.log("我的原型在吃")

}

f = new Friend();

f.chi(); // 此时. 该对象中. 有chi这个方法.  同时, 它的原型对象上, 也有chi这个方法.

// 运行结果:

// 我的朋友在吃
  1. prototype和__proto__有什么关系?

    在js中. 构造器的prototype属性和对象的__proto__是一个东西. 都是指向这个原型对象.
f.__proto__ === Friend.prototype   // true
  1. 原型链

    这个比较绕了. 我们从前面的学习中, 了解到. 每个对象身体里. 都隐藏着__proto__也就是它的原型对象. 那么我们看哈, 原型对象也是对象啊, 那么也就是说. 原型对象也有__proto__属性.

类似于.....这样:

f.__proto__.__proto__

打印出来的效果是这样的:



此时. 又出现一堆看不懂的玩意. 这些玩意是什么? 这些其实是Object的原型.

f.__proto__.__proto__ === Object.prototype

所以, 我们在执行f.toString()的时候不会报错. 反而可以正常运行. 原因就在这里.

执行过程: 先找f对象中是否有toString. 没有, 找它的原型对象.原型对象中没有, 继续找原型对象的原型对象. 直至你找到Object的原型为止. 如果还是没有. 就报错了.

f.hahahahahahah()  // 报错.

综上, 原型链是js 方法查找的路径指示标.

5. 我们用原型链能做什么?(每日一恶心)

我们来看一段神奇的代码.

(function(){debugger})();

这样一段代码可以看到. 浏览器进入了debugger断点.

那么这段代码的背后是什么呢? 注意. 在js代码执行时. 每一个function的对象都是通过Function()来创建的. 也就是说. 函数是Function()的对象.

function fn(){}

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

这样一段代码可以看到. 浏览器进入了debugger断点.

那么这段代码的背后是什么呢? 注意. 在js代码执行时. 每一个function的对象都是通过Function()来创建的. 也就是说. 函数是Function()的对象.

function fn(){}

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

函数就是Function的对象. 那么. 我们可以通过Function来构建一个函数.

new Function('debugger')();

OK. 这东西对我们来说有什么用. 上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="haha.js"></script>

  <script>

    txsdefwsw();

  </script>

</head>

<body>

    有内鬼. 终止交易

</body>

</html>

haha.js 中的内容如下:

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);

    }

}

页面跑起来没什么问题. 但是会无限debugger;

解决方案:

  1. 找到断点出. 右键-> never pause here;
  2. 写js hook代码;
var x = Function; // 保留原来的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__

构造器.prototype

function jiami(){

}

jiami.prototype.md5 = function(){}

jiami.prototype.aes = function(){}

jiami.prototype.encrypt = function(){}

var s = new jiami();

s.md5();

13 JavaScript关于prototype（超重点）的更多相关文章

  1. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  2. Javascript Array.prototype.some()

    当我们使用数组时,查找数组中包含某个特殊的项是非常常见的动作.下面例子是一个简单的实现: 01 planets = [ 02     "mercury", 03     " ...

  3. Javascript中prototype属性详解 （存）

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  4. javascript 之 prototype 浅析

    prototype 原型 javascript 是一种 prototype based programming 的语言, 而与我们通常的 class based programming 有很大 的区别 ...

  5. Javascript: 从prototype漫谈到继承(2)

    本文同时也发表在我另一篇独立博客 <Javascript: 从prototype漫谈到继承(2)>(管理员请注意!这两个都是我自己的原创博客!不要踢出首页!不是转载!已经误会三次了!) 上 ...

  6. JavaScript 笔记 ( Prototype )

    这阵子实在好忙 ( 这样说好像也不是一两个月了... ),然后因为工作伙伴都是 JavaScript 神之等级的工程师,从中也学到不少知识,毕竟就是要和强者工作才会成长呀!为了想好好瞭解他们写的程式码 ...

  7. JavaScript和prototype

    Protoype这个词在javascript中可以有两种理解: 第一种是作为javascript中的一个属性,其一般出现的形式为:类名.prototype. prototype 属性让你有能力向对象添 ...

  8. 在 JavaScript 中 prototype 和 __proto__ 有什么区别

    本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的 ...

  9. javascript继承—prototype最优两种继承（空函数和循环拷贝）

    一.利用空函数实现继承 参考了文章javascript继承-prototype属性介绍(2) 中叶小钗的评论,对这篇文章中的方案二利用一个空函数进行修改,可以解决创建子类对象时,父类实例化的过程中特权 ...

  10. 13.JavaScript 类

    JavaScript 类 JavaScript 是面向对象的语言,但 JavaScript 不使用类. 在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样 ...

随机推荐

  1. 开源：Taurus.DistributedLock 分布式锁框架，支持 .Net 和 .Net Core 双系列版本

    前言: 在经过漫长的技术沉淀,终于又为 .Net 及 .Net Core 的微服务系列框架贡献当中的一个重要组件. Taurus.DistributedLock is a distributed lo ...

  2. SVN培训笔记（下拉项目、同步修改、添加文件、修改文件、删除文件、改名文件等）

    前言   为了方便新加入团队的员工熟悉团队协作开发.  为了将好东西整理分享给有需要的网友.  将SVN内部员工培训文档公开,以方便更多的人,提高知识获取速度,尽快熟悉协同开发.  本文档培训员工对于 ...

  3. zynq7000 I2C RTC 与 串口使用

    RS485 串口 测试 硬件上2路串口,其中UART 1对应PS STD IN/OUT,UART 0对应RS485: 图 ‑1 RS485电路,自动转换输入.输出方向 可参考 https://blog ...

  4. 第119篇: JavaScript 类

    好家伙,我们先来复习一下   关于Java,类的三大特征: 1.封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏. 2.继承,继承性更 ...

  5. You can't specify target table for update in FROM clause

    mysql中You can't specify target table for update in FROM clause错误的意思是说,不能先select出同一表中的某些值,再update这个表( ...

  6. 【Azure Fabric Service】Service Fabric 托管群集通过 Connect-ServiceFabricCluster 连接时候报错 CertificatedNotMatched

    问题描述 Service Fabric 托管群集, 使用Key Vault中证书,把证书导入到本地安装后,使用该证书的 Thumbprint 作为指令 Connect-ServiceFabricClu ...

  7. gopkg.in/go-playground/validator中比较有用的标签

    -  忽略|  或omitempty 有则验证,空值则不验证dive  潜入到切片.数组.映射中,例如 NumList []int `validate:"len=2,dive,gt=18&q ...

  8. 关于KMP模式匹配的一些思考

    算法简介 模式匹配 给定主串text和模式串pattern,在主串中查找,如果找到了模式串,返回模式串在主串中的起始位置,从1开始计数. 暴力求解求解模式匹配 算法的核心思想是:蛮力法.即使用两个指针 ...

  9. electron打包踩过的坑总结 好文

    electron打包踩过的坑总结 https://segmentfault.com/a/1190000018533945

  10. 基于ads1292心电数据存储和状态显示

    一 前记 ads1292芯片在专业的心电采集这块应用十分广泛.随着医疗可穿戴的发展,便携式心电测量这块前景十分广阔.基于现在的几个项目,团队在这里花费了不少精力,借此机会把这个方向打造成团队的特色之一 ...