进阶 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

Previous进阶 2 - JS中的各种操作(非交互)Next进阶 4 - DOM 对象

Last updated 11 months ago

hashtag神奇的window（浏览器环境）

hashtagcall 和 apply

hashtagES6 中的箭头函数

hashtagexports

神奇的window（浏览器环境）

call 和 apply

ES6 中的箭头函数

exports