深入学习js函数的隐式参数 arguments 和 this

// 1. 定义有一个形参的函数fn()
function fn(arg){}
// 2. 在调用时传入 0 个或 多个参数，并不会报错
fn(); // 传入 0 个参数
fn(1,'a',3); // 传入多个参数

function fn(arg1, arg2, arg3){
console.log(arg1 === arguments[0]); // true
console.log(arg2 === arguments[1]); // true
console.log(arg3 === arguments[2]); // true
}
fn(1,2,3); // 调用

// 定义只有一个形参的函数
function fn(arg1){ 
console.log('length of arguments is:',arguments.length);
console.log('arguments[0] is:', arguments[0]); // 获取传入的第一个实参, 也就是形参 arg1 的值
console.log('arguments[1] is:', arguments[1]); // 获取第二个实参的值, 没有形参与其对应
console.log('arguments[2] is:', arguments[2]); // 获取第二个实参的值, 没有形参与其对应
}
fn(1,2,3); // 传入 3 个实参
// 可以得到实际上传入的实参的个数并取出所有实参
// length of arguments is: 3
// arguments[0] is: 1
// arguments[1] is: 2
// arguments[2] is: 3

function fn(arg1, arg2){
// 1. 修改arguments元素，对应的形参也会被修改
arguments[0] = '修改了arguments';
console.log(arg1); 
// 2. 修改形参值，对应的arguments也会被修改
arg2 = '修改了形参值';
console.log(arguments[1]); 
}
fn(1,2);
// '修改了arguments'
// '修改了形参值'

'use strict'; // 启用严格模式
function fn(arg1, arg2){
// 修改arguments元素，对应的形参也会被修改
arguments[0] = '修改了arguments';
console.log(arg1);
// 修改形参值，对应的arguments也会被修改
arg2 = '修改了形参值';
console.log(arguments[1]);
}
fn(1,2);
// 1
// 2

function fn(){
console.log(typeof arguments); // object
console.log(arguments instanceof Array); // false
}
fn();

function fn(...args){ // 通过解构的方式得到实参
console.log(args instanceof Array); // args 是真正的数组
console.log(args); // 而且 args 中也保存了传入的实参
}
fn(1,2,3);
// true
// Array(3) [1, 2, 3]

// 非严格模式
function fn(){
console.log(this);
}
fn(); // global || Window

'use strict';
function fn(){
console.log(this);
}
fn(); // undefined

// 定义一个对象
let xm = {
getThis (){ // 定义一个函数
return this; // 这个函数返回自己的 this 指向
}
}
let thisOfFunc = xm.getThis(); // 通过对象调用函数得到函数的 this 指向
console.log(thisOfFunc === xm); // true, 函数的this指向调用它的对象本身

let xm = {
name: '小明', // 给 xm 加一个属性, 可以通过 xm.name 访问到
getName (){ 
return this.name; // 返回 this 的指向的 name 属性
}
}
console.log(xm.name, xm.getName()); // 小明 小明

function Person(name){
this.name = name;
return 1; // 不要这样对待构造函数
}
let n = Person(); // 不要这样使用构造函数

function Person(){
this.getThis = function(){ // 这个函数返回 this
return this;
}
}
let p1 = new Person(); // 调用了构造函数并返回了一个新的对象
console.log(p1.getThis() === p1); // true
let p2 = new Person();
console.log(p2.getThis() === p2); // true

fn.call(targetThis, arg1, arg2,..., argN)
fn.apply(targetThis, [arg1, arg2,.., argN])
fn: 要调用的函数
targetThis: 要把 fn 的 this 设置到的目标
argument: 要给 fn 传的实参

let xm = {
name: '小明',
sayName(){
console.log(this.name);
}
};
xm.sayName(); // 对象调用函数输出 '小明'

let xh = {
name: '小红'
};

xm.sayName.call(xh); // 小红
xm.sayName.apply(xh); // 小红

fn.call(targetThis, 1, 2, 3); // 把 1,2,3直接传入
fn.apply(targetThis, [1,2,3]); // 把1,2,3合成数组后作为参数

function Person(){
this.age = 24;
setTimeout(function(){
console.log(this.age); // undefined
console.log(this === window); // true
}, 1000);
}
var p = new Person(); // 创建一个实例的时候就立即执行了定时器

function Person(){
this.age = 24;
setTimeout(() => {
console.log(this.age); // 24
console.log(this === p); // true
}, 1000);
}
var p = new Person();

// 创建一个对象有 name 和 sayName 属性
let p1 = {
name: 'P1',
sayName(){ 
console.log(this.name); // 访问函数指向的 this 的 name 属性
}
}
p1.sayName(); // P1
// 创建一个对象 p2, 并把这个对象作为bind函数绑定的this
let p2 = {
name: 'P2'
}
// 将p1的 sayName 函数的 this 绑定到 p2 上, 生成新函数 sayP2Name 并返回
let sayP2Name = p1.sayName.bind(p2); 
// 由于此时 sayP2Name 的内部 this 已经绑定了 p2, 
// 所以即使是按 文章2.1部分 所说的直接调用 sayP2Name, 它的 this 也是指向 p2 的, 并不是指向全局上下文或者 undefined
sayP2Name(); // P2
// 定义新对象, 尝试将 sayP2Name 的 this 指向到 p3 上
let p3 = {
name: 'P3'
}
// 尝试使用 call和apply 函数来将 sayP2Name 函数的 this 指向p3,
// 但是由于 sayP2Name 函数的this 已经被bind函数永远绑定到p2上了, 所以this.name仍然是p2.name
sayP2Name.call(p3); // P2
sayP2Name.apply(p3); // P2