进阶 3 - JS中的各种操作(非交互) 2
神奇的window（浏览器环境）
window对象是一个很神奇的东西. 你可以把这东西理解成javascript的全局. 如果我们默认不用任何东西访问一个标识符. 那么默认认为是在用window对象进行访问该标识符.
例如:
var a = 10;
a === window.a // true
window.mm = "爱你"
console.log(mm); //"爱你"综上, 我们可以得出一个结论. 全局变量可以用window.xxx来表示.
注意：window对象实际上表示的是浏览器的窗口。浏览器的窗口只有浏览器有。我们在浏览器中的开发者工具的Console选项卡中是可以直接使用window对象。
但是：在pycharm中直接使用window对象会报错：ReferenceError: window is not defined。why？就是因为在pycharm中是没有浏览器窗口。
所以切记：window对象是专属于浏览器环境下的一个内置对象。就意味着window只可以在浏览器环境下无需声明直接被使用。
ok. 接下来. 注意看了. 我要搞事情了
//如果想在外部调用下面函数的中的chi函数如何实现？
(function(){
let chi = function(){
console.log("我是吃")
}
})();
chi() //会报错，因为chi是一个局部变量
//正确写法：
(function(){
let chi = function(){
console.log("我是吃")
}
window.chi = chi //全局的
})();
chi();
//换一种写法. 你还认识么?
(function(w){
let chi = function(){
console.log("我是吃")
}
w.chi = chi
})(window);如何在node环境下执行上述代码？
// globalThis 在浏览器和node中都可以使用。
// 在Pycharm中就可以使用globalThis代替window用于全局变量的声明
//全局变量的声明
globalThis.a = 10;
console.log(a);window是整个浏览器的全局作用域.
使用 window 对象也可以访问客户端其他对象，这种关系构成浏览器对象模型，window 对象代表根节点，浏览器对象关系的关系如图所示，每个对象说明如下。
window：客户端 JavaScript 顶层对象。每当 <body> 或 <frameset> 标签出现时，window 对象就会被自动创建。
navigator：包含客户端有关浏览器信息。
screen：包含客户端屏幕的信息。
history：包含浏览器窗口访问过的 URL 信息。
location：包含当前网页文档的 URL 信息。
document：包含整个 HTML 文档，可被用来访问文档内容及其所有页面元素。
call 和 apply
对于咱们逆向工程师而言. 并不需要深入的理解call和apply的本质作用. 只需要知道这玩意执行起来的逻辑顺序是什么即可（外部函数关联对象的内部成员）
在运行时. 正常的js调用：
function People(name, age){
this.name = name;
this.age = age;
this.chi = function(){
console.log(this.name, "在吃东西")
}
}
var p1 = new People("alex", 18);
var p2 = new People("wusir", 20);
p1.chi();
p2.chi();接下来, 我们可以使用call和apply也完成同样的函数调用
function People(name, age){
this.name = name;
this.age = age;
this.chi = function(){
console.log(this.name, "在吃东西")
}
}
p1 = new People("alex", 18);
p2 = new People("wusir", 20);
p1.chi();
p2.chi();
//外部函数关联对象的内部函数：
//想要让alx吃："馒头", "大饼"，如何调用下面的函数？
function eat(what_1, what_2){
console.log(this.name, "在吃", what_1, what_2);
}
// call的语法是: 函数.call(对象, 参数1, 参数2, 参数3....)
// 执行逻辑是: 执行函数. 并把对象传递给函数中的this. 其他参数照常传递给函数
eat.call(p1, "馒头", "大饼");apply和他几乎一模一样. 区别是: apply传递参数要求是一个数组
eat.apply(p1, ["馒头", "大饼"]);ES6 中的箭头函数
在ES6中简化了函数的声明语法.
var fn = function(){};
// 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
var fn = () => {};
var fn = function(name){}
var fn = name => {}
var fn = (name) => {}
var fn = function(name, age){}
var fn = (name, age) => {}
var f = v => v*v
// 等同于
var f = function(v) {
return v*v
}exports
类似Python中的模块导入
// functions.js文件
// 加法函数
function add(a, b) {
return a + b;
}
// 乘法函数
function multiply(a, b) {
return a * b;
}
// 导出函数
exports.add = add;
exports.multiply = multiply;// main.js
// 导入 functions 模块
const functions = require('./functions');
// 使用导入的函数
console.log(functions.add(2, 3)); // 输出: 5
console.log(functions.multiply(4, 5)); // 输出: 20
Last updated