【JS逆向基础】前端基础-JS
前言:前面系列文章介绍了HTML与CSS,当然作为“前端三剑客”的JS相较于前面两种更为重要,本篇文章就概括介绍一下JavaScript语言的基本语法。
1,JS基础
一门弱类型的编程语言,属于基于对象和基于原型的脚本语言
-
JS引入方式
引入文件或者直接的语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*CSS语句*/</style><script src="hello.js">/*JS语句*/</script>
</head>
<body></body>
</html>
-
JS基本语法
- 变量
- 数据类型
- 运算符
- 流程控制语句
- 函数
- 类
(1)变量声明赋值
1,单行注释
//
2,多行注释
/**/
3,打印
console.log()
4,分割符
//换行或者分号都可以作为换行符var x=10; //如果不写var则是全局变量
(2)数据类型
var age = 10
var name ="yuan" //也支持单引号
var isMarried = false
var names =["rain","eric","yuan"]
var info ={name:"yuan",age:18,isMarried:false} //其中的类似于键的东西不加引号也可以
var info2={ "name":"yuan","age":22,"sex": true,"son":{"name":"alex","age": 38}"hobby":["篮球","唱","跳"]
}console.log(":::",info2.name) //可以将其作为属性值来使用
(3)JS的运算符
console.log(1 + 1)
// + - * /
var x = 10;
//++ --
x += 1 //x=x+1
x++
//> < == ===
console.log(x);
console.log(2 > 3)
console.log(2 == "2") //其中会有一个暗类型转换,最后的结果会返回true
console.log(2 === "2")
console.log(1 + "2") //最后的结果会打印出来"12",其中会将整形的1做一个暗类型转换
//&& || ! (与或非运算符)
(4)JS的流程控制与语句
// 1,if语句
var age = 18;
if(age >= 18){console.log("成人区")
}else{console.log("未成年区")
}
//2,switch 语句
switch(条件){
case 结果1://满足条件执行的结果是结果1时,执行这里的代码。
break;
case 结果2://满足条件执行的结果是结果2时,执行这里的代码。
break;
default://条件和上述所有结果都不相等时,则执行这里的代码//3, 循环语句
while(循环的条件){//循环条件为true的时候,会执行这里的代码
}// 循环三要素
for(1.声明循环的开始; 2.条件; 4.循环的计数) {//3.循环条件为true的时候,会执行这里的代码
}
(4)JS的函数
foo(); //函数可以在声明的上面执行function foo(){console.log("未成年区");
}//匿名函数
(function(){console.log("未成年区");
})() //相当于匿名函数可以直接调用
(5)JS的字符串与数组的内置方法
//(1)字符串内置方法
var str="hello world";
console.log(str.length);
str.toUpperCase();
str.toLowerCase();
str.slice(3,6); //返回的是一个"lo w"
str.split("");
str.trim();Var Citys ="深圳 天津 北京 上海";
citysArray = citys.split("");
console.log(citysArray.length);
console.log(citysArray.join(','));//(2)数组内置方法
var arr=[1,2,3,4,5];
arr.push(6); //给数组后面追加成员
arr·pop(); //删除最后一个成员作为返回值
arr.shift(); //shift是将数组的第一个元素删除
arr.unshift(0); //unshift是将value值插入到数组的开始
var arr =["a","b","c"];
//删除
arr.splice(1,1); //["a","c"]
//插入
arr.splice(1,0,"b") //["a","b","b","c"]
//替换
arr.splice(1,1,"B");//["a","B","c"]
arr.reverse()// slice(开始下标,结束下标) 切片,开区间
arr.slice(1.3)
// filter()高阶函数,对数组的每一个成员进行过滤,返回符合条件的结果
var arr =[4,6,5,7];//也可以使用匿名函数或者箭头函数
function fune(num){if(num % 2 === 0){return numi}
}
//下面函数中的fune也可以传入匿名函数进行处理
var ret= arr.filter(fune); //所有的函数名都可以作为参数传递到另一个函数中被执行
console.log(ret);map()函数对数组的每一个成员进行处理,返回处理后的每一个成员
var arr=[1,2,3,4,5];
var ret = arr.map((num)=>{return num ** 3
});
console.log(ret);//[1,8,27,64,125]
-
JSON的序列化与反序列化
序列化:将编程语言中的支持的数据类型对象做一个格式化的字符串,从而可进行存储或者网络传输
反序列化:与上面的相反

-
JS的查找标签
js先选择标签 再操作标签
-
直接查找标签
document.getElementsByTagName("标签名")
document.getElementById("id值”)
document.getElementsByClassName("类名")
1、方法的返回值是dom对象还是数组
2、document对象可以是任意dom对象,将查询范围限制在当前dom对象
-
导航查找标签
elementNode.parentElement // 父节点标签元素
elementNode.children // 所有子标签
elementNode.firstElementChild // 第一个子标签元素
elementNode.lastElementChild // 最后一个子标签元素
elementNode.nextElementsibling //下一个兄弟标签元素
elementNode.previousglementsibling //上一个兄弟标签元素
-
CSS选择器查找
document.queryselector("css选择器"); //根据css选择符来获取查找到的第一个元素 返回标签对象(dom对象)
document.querySelectorA11("css选择器");// 根据css选择符来获取查找到的所有元素 返回数组
-
绑定事件
静态绑定:直接把事件写在标签元素中
<div id="div" onclick="foo(this)">click</div>
<script>function foo(self){ //形参不能是this;console.log("foo函数");console.log(self);}
</script>
动态绑定:在js中通过代码获取元素对象,然后给这个对象进行后续绑定
<p id="i1">试-试!</p>
<script>
var ele=document.getElementById("i1");
ele.onclick = function() {console.log(this);console.log(this);//this直接用}
</script>
-
JS的操作标签
<标签名 属性1="属性值1" 属性2="属性值2"...>文本</标签名>
//文本操作
<div class="cl"><span>click</span></div>
<script>var ele =document.querySelector(".cl");ele.ondblclick=function(){//查看标签文本console.log(this.innerHTML);// 设置标签文本this.innerHTM ="yuan";}
</script>//value操作
// 像input标签,select标签以及textarea标签是没有文本的,但是显示内容由value属性决定
<input type="text" id="il" value="yuan">
<script>// input标签var elel = document.getElementById("il");console.log(elel.value);elel.onmouseover = function(){this.value = "yuan"}
</script>// css样式操作
<p id="il">Hello world!</p>
<script>var ele=document.getElementById("il");ele.onclick = function() { //点击之后标签变成红色this.style.color ="red" }
</script>
//属性操作
elementNode.setattribute("属性名","属性值");
elementNode.getattribute("属性名");
elementNode.removeAttribute("属性名");
//并不是所有属性都可以像value那样操作
//class属性操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
-
jQuery
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less、Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
(Querv的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuer兼容各种主流浏览器,如IE6.0+、FF1.5+、Safari 2.0+、Opera
9.0+等目前在市场上,1.x,2.x,3.x 功能的完善在1.x,2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构
根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
// 基本选择器:
$("#id")
$(".class")
$("element")
$(".class,p,div")
// 后代选择器:
$(".outer div")
// 筛选器:
$().first()
$().last()$().eq()
// 导航查找:
$("div").children(".test")$("div").find(".test")
// 向下查找兄弟标签
$(".test").next()
// 查找所有兄弟标签
$("div").siblings()
// 查找父标签
$(".test").parent()//绑定事件
1.on 和 off
// 绑定事件
$().on("事件名",匿名函数)
// 解绑事件,给指定元素解除事件的绑定
$().Off("事件名")
2.直接通过事件名来进行调用
$().事件名(匿名函数)//操作标签
//文本操作
$("选择符").htm1()
// 读取指定元素的内容,如果$()函数获取了有多个元素,提取第一个元素
$("选择符").htm1(内容) //修改内容,如果$()函数获取了多个元素,则批量修改内容
//value操作
$().val()
//属性操作
//读取属性值
$("选择符").attr(“属性名”); //获取非表单元素的属性值,只会提取第一个元素的属性值
$("选择符").attr("属性名",“属性值"); //修改非表单元素的属性值,如果元素有多个,则全部修改
//操作属性//css样式操作
//获取样式
$().css("样式属性”); // 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值
//操作样式
$().css("样式属性","样式值").css("样式属性”,"样式值");
$().css({"样式属性1":"样式值1","样式属性2":"样式值2",....})
//class 属性操作
$().addClass("class1class2……") //给获取到的所有元素添加指定class样式
$().removeClass() //给获取到的所有元素删除指定class样式
$().toggleclass() //给获取到的所有元素进行判断,如果拥有指定c1ass样式的则删除,如果没有指定样式则添加//节点操作
$("").append(content fn) // $("p").append("<b>Hello</b>");
-
Ajax请求
Ajax,一般中文称之为:"阿贾克斯",是英文"Async javascript And Xm"的简写,译作:异步js和xml传输数据技术。
ajax的作用: ajax可以让js代替浏览器向后端程序发送 http 请求,与后端通信,在用户不知道的情况下操作数据和信息,从而实现页面局部刷新数据/无刷新更新数据。
所以开发中ajax是很常用的技术,主要用于操作后端提供的数据接口,从而实现网站的 前后端分离ajax技术的原理是实例化js的XMLHtpRequest对象,使用此对象提供的内置方法就可以与后端进行数据通信。数据接口
数据接口,也叫api接口:表示后端提供操作数据/功能的url地址给客户端使用。客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般:增删查改】同时在工作中,大部分数据接口都不是手写,而是通过函数库/框架来生成。
前后端分离:
在开发Web应用中,有两种应用模式:
- 前后端不分离
- 前后端分离
ajax的使用:
aiax的使用必须与服务端程序配合使用,但是开发中我们对于ajax请求的数据,不仅仅可以是自己写的服务端代码,也可以是别人写好的数据接口进行调用。

2,JS进阶
2.1 DATA对象
创建Date对象:
var now=new Date();
console.log(now.toLocalestring());
# 获取日期和时间
now.getDate() #获取日
now.getDay() #获取星期
now.getMonth() #获取月(0-11)
now.getFullYear() #获取完整年份
now.getYear() #获取年
now.getHours() #获取小时
now.getMinutes() #获取分钟
now.getseconds() #获取秒
now.getMilliseconds() #获取毫秒
now.getTime() #返回累计毫秒数(从1970/1/1午夜)*/
2.2 MATH对象
// Math对象
// Number对象的内置方法
// toFixed(x) #保留小数位
var num = 100.3;
var ret = num.toPixed(2)
console.log(num);//100.3
console.log(ret);//100.30// Math对象的内置方法
//abs(x) 返回数值的绝对值
// var num=-10;
console.log(Math.abs(num)); //10
//ceil(x) 向上取整
var num=10.3;
console.log(Math.ceil(num)); //11
//floor(x)向下取整
var num 10.3;
console.1og( Math.floor(num));//10
// max(x,y,2,...rn)
console.log( Math.max(3,56,3));//56
// min(xryr2,...rn)
2.3 闭包函数
在计算机科学中,闭包(英语:Closure),又称词法闭包(LexicalCosure)或函数闭包(functionclosures),是引用了自由变量(外部非全局)的函数。
简单来说就是一个函数定义中引用了函数外定义的变量,并且该函数可以在其定义环境外被执行。这样的一个函数我们称之为闭包函数。
<script>var key=123456"function foo(){console .log(key)}
</script>
<script>var key="abcdefg'function bar(){console.log(key);}
</script>
<script sre:"test01.js"></script>
<script src="test02.js"></script>
运行之后会出现如下结果:

这就是全局变量污染
很明显,虽然各自js在编写时是分开的,但是在运行时,是在同一个空间内执行的,他们拥有相同的作用域,此时的变量势必是非常非常不安全的,那么如何来解决呢?注意,在js里,变量是有作用域的,也就是说一个变量的声明和使用是有范围的.不是无限的,这一点,很容易验证。
funetion fn(){let love = "爱呀"}
fn()
console.log(love)
直接就报错了,也就是说.在js里是有全局和局部的概念的
直接声明在最外层的变量就是全局变量,所有函数,所有代码块都可以共享的,但是反过来就不是了,在函数内和代码块内声明的变量.尤其是函数内.声明出来的变量它是一个局部变量,外界是无法进行访问的,即函数是可以开辟独立的作用域环境的。我们就可以利用这一点来给每个功能脚本创建一个局部空间
<script>function foo(){var key=123456"console .log(key)}
</script>
<script>function bar(){console.log(key);var key="abcdefg"}</script>
<script sre:"test01.js"></script>
<script src="test02.js"></script>
也可以这样操作:将同名函数放到一个匿名函数中然后赋值到一个变量的作用域下面
<script>var f = (function(){function set_key(key){return key + "111"}function foo(){var key ="123456";var new_key= set_key(key);return "foo的key:" + new_key;}return foo()})() //加上()就可以将匿名函数自执行</script>
<script>(function(){function set_key(key){return key + "111"}function bar() {console.log(key);var key="abcdefg"var new_key= set_key(key);return "bar的key:" + new_key;} return bar()})()
</script>
<script sre:"test01.js"></script>
<script src="test02.js"></script>
以上代码中的foo()与bar()均为闭包函数
2.4 prototype 原型对象
案例1:
//创建方式1
var foo =new Function("console.log('hello world!')")foo ( )
//创建方式2
function Person(){console.log("hello person")
}
var pl= Person()
console.log(pl)
var p2 = new Person()
console.log(p2)
什么是JS原型对象?
- prototype(原型对象)就是一个容器
- 存放公共的方法给对象使用
- 对象可以直接访问原型对象中的方法和属性
- 原型对象类似Python的类对象(fn.prototype)
原型对象和函数之间的关系:
- 每个函数都会有一个 prototype 属性,指向原型对象
- 每个原型对象都会有一个 constructor 属性,指向函数总结
- 每个函数与原型对象之间的关系是 互相引用

对象和原型对象和函数之间的关系
- 函数创建对象var o= new Fn();
- 对象通过_proto_属性,指向原型对象.
- 对象可以直接调用原型对象中所有的属性和方法
- 对象可以通过原型对象中的constructor属性知道构造函数
总结:原型对象就是一个容器,帮助函数存放公共方法,以及给函数new出来的对象提供公共方法使用
//构建函数对象的方式1
function foo(){var key ="123456";var new_key= "qqqqqqqqqqq";return "foo的key:" + new_key;
}
//构建函数对象的方式2
var bar = new Function("console.log(foo())")
bar()//补充 undefined
var x// 声明未赋值,得到undefine
console.log(x)
function f(){console.log("f...")
}
var ret = f() //函数没有返回值默认返回//函数对象声明
function Person(name,age){this.name = name;this.age = age;this.read = function(){console.log(this.name + " " + this.age)}console.log("Person...");
}
var p = new Person("John",30);
console.log(p.age) //返回打印的为person的实例化对象
console.log(p.name)p.read();
console.log(Person.prototype);
console.log(Person.prototype.constructor); //指向自己的容器对象
// 实例化对象
console.log(p.__proto__);
console.log(p.__proto__.constructor);//知识点
Person.prototype = {fly: function() {console.log("fly...")}
}
let Zhangshan = new Person("Zhangshan",30);
Zhangshan.fly();
2.5 window对象
window 是客户端浏览器对象模型的基类,window 对象是客户端 JavaScript 的全局对象。一个 window 对象实际上就是一个独立的窗口,对于框架页面来说,浏览器窗口每个框架都包含一个 window 对象。
-
全局作用域
在客户端浏览器中,window 对象是访问 BOM 的接口,如引用 document 对象的 document 属性,引用自身的 window 和 self 属性等。同时 window 也为客户端 JavaScript 提供全局作用域。由于 window 是全局对象,因此所有的全局变量都被解析为该对象的属性。
<script>
//全局变量
var username "yuanhao";
function f(){ //全局函数
console.log(username);
console.log(window.username);//返回字符串"yuanhao"
window.f();//返回字符串"yuanhao”
</script>
-
使用系统对话框
window 对象定义了3个人机交互的方法,主要方便对 JavaScript 代码进行调试。
- alert(0): 确定提示框。由浏览器向用户弹出提示性信息。该方法包含一个可选的提示信息参数。如果没有指定参数,则弹出一个空的对话框。
- confirm(): 选择提示框。。由浏览器向用户弹出提示性信息,弹出的对话框中包含两个按钮,分别表示“确定"和“取消”按钮。如果点击“确定“按钮,则该方法将返回 true;单击“取消"按钮,则返回 false。confirm()方法也包含一个可选的提示信息参数,如果没有指定参数,则弹出一个空的对话框。
- prompt(): 输入提示框。可以接收用户输入的信息,并返回输入的信息。prompt()方法也包含一个可选的提示信息参数,如果没有指定参数,则弹出一个没有提示信息的输入文本对话框
function f(){ var username = "ThinkPad"; window.username = username; } f();
-
访问客户端对象
使用 window 对象可以访问客户端其他对象,这种关系构成浏览器对象模型,window 对象代表根节点,浏览器对象关系的关系如图所示,每个对象说明如下。
- window:客户端 JavaScript 顶层对象。每当或标签出现时,window 对象就会被自动创建。
- navigator:包含客户端有关浏览器信息。
- screen:包含客户端屏幕的信息。
- history:包含浏览器窗口访问过的 URL 信息:
- location:包含当前网页文档的 URL信息。
- document:包含整个 HTML 文档,可被用来访问文档内容及其所有页面元素

-
使用定时器
window 对象包含 4个定时器专用方法,说明如下表所示,使用它们可以实现代码定时执行,或者延迟执行,使用定时器可以设计演示动画

setTimeout()方法能够在指定的时间段后执行特定代码。用法如下:
var o = setTimeout(code, delay)
参数 code 表示要延迟执行的字符串型代码,将在 Windows 环境中执行,如果包含多个语句,应该使用分号进行分隔。delay 表示延迟时间,以毫秒为单位。
该方法返回值是一个 Timer ID,这个 ID 编号指向延迟执行的代码控制句柄。如果把这个句柄传递给 clearTmeout0) 方法,则会取消代码的延迟执行。
//定时器执行
var ID = setInterval(function () {console.log("hello world");
},1000)
//取消定时器
function() {clearInterval(ID);
}
2.6 ES6新语法
1. var、jet以及const
ES6 中引入了关键字 let 和 const 作为 var 的替代。它们非常有用,如今几乎每JavaScript 开发人员都在使用它们。
与关键字 var 不同,这两个关键字具有块作用域。这意味着当你在块中声明它们时,它们只能在该块{ }内访问。
// for(var i-0;i<10;i++) {
// console.log(i);
// }
// console.log(i)for (1et i=0; i<10; i++){console.log(i);
}
-
变量提升
看以下代码,或多或少会有些问题的
function fn(){console.log(name);var name = 'yuan'
}
fn()
这么写代码,在其他语言里,绝对是不允许的,但是在s里,不但允许,还能执行,为什么呢?会首先检测你的代码,发现在代码中会有name使用.OK.运行时就会变成这样的逻辑:
funetion fn(){var name;console.log(name);name ='yuan'
}
fn()
console.log(a);
看到了么.实际运行的时候和我们写代码的顺序可能会不一样.…这种把变量提前到代码块第一部分运行的逻辑被称为变量提升.这在其他语言里是绝对没有的,并且也不是什么好事情,正常的逻辑不应该是这样的,那么怎么办?
在新的ES6中,就明确了,这样使用变量是不完善的.es6提出.用let来声明变量,就不会出现该问题了.
function fn(){console.log(name); //直接报错,1et变量不可以变量提升let name ='yuan';
}
fn()
显然一个变量被声明了两次,这样也是不合理的.var本意是声明变量,同一个东西,被声明两次.所以ES6规定,let声明的变量,在同一个作用域内.只能声明一次
// const声明常量必须赋初始值
const a=6;//合法有效
const b;//报错 SyntaxError,必须赋初始值才可以
//const声明的常量不能更改
const a=6;//合法有效
a=7;//报错,不能更改
/*
对于const声明的原始数据类型,一旦声明变不能更改,但是对于引用数据类型,虽然不能重新赋值给某个新的引用类型变量。但是操作操作引用数据类型变量中的元素或者属性却是合法的。因为这些操作不会改变引用数据类型的地址。*/
const obj={};
obj.name="南山行者";//合法有效
console.log(obj)
const arr=[1,2,3]i
arr.push(3);//合法有效
arr.shift();//合法有效
console.1og(arr);
2,ES6中的箭头函数
在ES6中简化了函数的声明语法
ES6允许使用"箭头"(=>)定义函数。
var f = v => v
// 等同于
var f= function(v){return v
}
//如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
var f=() => 5
// 等同于
var f= function(){return 5
}
var sum =(num1,num2)=>num1+num2
// 等同于
var sum = function(numl,num2){return numl+num2;
}
//如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
VaIsum=(numl,num2)=>(return numl+num2}
//由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错// 报错
let getUser =id =>{id: id,name:"yuan"}
//不报错
let getUser =id =>({id: id,jame: "yuan"})
//箭头函数的一个用处是简化回调函数
// 正常函数写法
[1,2,3].map(function(x){
return X *X
})//箭头函数写法
[1,2,3].map(x => x * x)
3,ES6对象简写
var name = "yuan"
var age = 22
function run() {console.log(this.name +"running")
}
p1 = {name,age,eat:function() {console.log(this.name + "is eating")},run:run,
}
p1.eat()
p1.run()
4,字符串模板处理
ES6中允许使用反引号、来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量 ${vraible}
yar num = Math.round(x: Math.random()*10)
console.log(numconsole.log("随机数:" + num)
console.log(`随机数:${num}`)
2.7 三元运算符
let a =10;
let b=20;
let c=5;
let d = 17;
let ef
let m;
e = (e=a>3?b:c, m = e < b++ ? c--:a = 3 > b % d? 27 : 37, m++)
//e=a>3?b:c
//e=b=20
//m=e<b++?c--:a=3>b&d?27:37
//m=a=37
//e=m++
//e= 37 m=38
console.1og(e);
console.1og(c);
console.log(m);
2.8 eval
eval() 函数计算 JavScript 字符串,并把它作为脚本代码来执行。
如果参数是一个表达式,eval()函数将执行表达式。如果参数是Javascript语句,eval()将执行 Javascript 语句
eval(string)
//
eval('[1,2,3,4,5].map(x=>x*x)')
http://tools.jb51.netpassword/evalencode
2.9 Hook函数
-----重写函数,追踪源文件中的函数的位置
在 JS 逆向中,我们通常把替换原函数的过程都称为 Hook。
function foo(){console.log("foo功能...")return 123
}
foo()
var foo =foo
foo =function(){console.log("截断开始...")debugger;
}
foo()
console.log("截断结束..。")
案例1: Hook eval
console.log("程序开始")
window["e"+"v"+"a"+"l"]("console.log('eval yuan')")
console.1og("程序结束")
在程序的开始加一个断点,然后就可以执行下面代码,程序就可以执行到eval函数的时候停住
var _eval = eval
eval = function(src){consble.log("eval截断开始...")debugger;_eval.apply(this, src)console.log("eva1截断结束。")
}
下面基于可以定位到源代码中的相同名字的接口函数之中

案例2: Hook JSON.stringify
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串,在某些站点的加密过程中可能会遇到,以下代码演示了遇到JSON.stringify()时,则插入断点:
(function(){var stringify = JSON.stringify;Jso.stringify=function(params){console.log("Hook JsoN.stringif:::", params);debugger;return stringify(params);}
})()
案例3: Hook JSON.parse
JSON.parse() 方法用于将一个 JSON 字符串转换为对象,在某些站点的加密过程中可能会遇到,以下代码演示了遇到JSON.parse()时,则插入断点:
function(){var parse = JSON.parse;JSOM.parse = function(params){console.log("Hook JsoN.parse:::", parse);debugger;return parse(params);}
2.10 call和apply方法
call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有cal,apply属性。既然作为方法的属性,那它们的使用就当然是针对方法的了,这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同。
foo.call(this,arg1,arg2,arg3)==foo.apply(this,arguments)== this.foo(argl, arg2, arg3);
//案例1:
function Person(name,age){this.name = namethis.age = age}
Person.prototype.eat=function() {console.log(this.name + "正在吃东西")}
P = new Person("yuan",22)
p.eat()//案例2:
function Person(name,age) {this.name = namethis.age = age
}
p = new Person("yuan",22)
function eat() {console.log(this.name +"正在吃东西")
}
eat.call(p)//案例3:
function Person(name,age) {this.name = namethis.age = age
}
p = new Person("yuan",22)
function eat() {console.log(this.name +"正在吃东西")
}
eat.apply(p)