导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

函数内部 this 指向

构造函数 this 指向实例化对象

function Test() {
  //var this = {
	//	__proto__: Test.prototype
	//}
	this.name = '123';
}
var test = new Test();

AO = {
	this： window -> {
    __proto__: Test.prototype,
    name: '123'
  }
}
GO = {
	Test: f() {},
  test: {}
}

call/apply 改变 this 指向

function Person() {
	this.name = 'Lance';
	this.age = 10;
}
function Programmer() {
	Person.apply(this);
	this.work = 'Programming';
}
var p = new Programmer();
console.log(p);

Untitled

⭐️ 闭包、箭头函数、setTimeout 中 this

var x = {
  name: 'bw2',
  getName1: function() {
    console.log(this)
  },
  getName2: function() {
    setTimeout(() => {
      console.log(this)
    },0)
  },
  getName31: () => {
    console.log(this)
  },
  getName32: function() {
    return function() {
      console.log(this)
    }
  }
}
x.getName1();

// {name: "bw2", getName1: ƒ}
// x为调用者

x.getName2()
// {name: "bw2", getName1: ƒ}
// 箭头函数没有this，this继承外层作用域，
// x为getName2调用者，this指向x

x.getName31()
// Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
// js中作用域只有全局作用域和函数作用域
// 箭头函数this指向外层作用域window，而不是调用者x

x.getName32()()
// Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
// this的值取决于调用上下文，
// 如果一个函数不是作为某个对象的方法被调用，
// 那么this就是global object.否则就是该对象

⭐️ callee/caller

arguments.callee 返回正在被执行的函数

function test(a, b, c) {
	console.log(arguments.callee.length); // === test.length = 3
	console.log(arguments.callee); // function test
}
test(1, 2, 3);

Untitled

callee 的应用 - 匿名函数递归调用

var sum = (function (n) {
  if (n <= 1) return 1;
	return n + arguments.callee(n - 1);
})(100);

console.log(sum); // 5050

Function.caller 返回调用指定函数的函数

function test1() {
	test2();
}
function test2() {
	console.log(test2.caller);
}
test1();

Untitled

⭐️ 函数在直接执行和被 new 执行后的 this 指向问题

var a = 5;

function test() {
	a = 0;
  console.log(a);
  console.log(this.a);
  var a;
  console.log(a);
}

test();
new test();

GO: {
	a: 5,
	test: function test() {}
}

AO: {
  this: window => {}
	a: undefined => 0,
}
  
// 执行 test 时打印: 0, 5, 0
// 执行 new Test 时打印: 0, undefined, 0
// 最终打印顺序: 0, 5, 0, 0, undefined, 0
  
// 解析：
// 实例化 test 时，有内部 this ，但是并没有给 this 上添加 a 属性，所以 this.a 打印 undefined

Untitled

练习题

call/apply，arguments

function foo() {
	bar.apply(null, arguments);
}
function bar() {
  console.log(arguments);
}
foo(1, 2, 3, 4, 5);

↓↓↓

function foo() {
  // arguments 是个类数组
  // 但由于 apply 接收的就是参数数组，所以相当于传递给了 bar 5 个参数
  // 分别是 1，2，3，4，5
	bar.apply(window, [1, 2, 3, 4, 5]);
}
function bar() {
	console.log(arguments); // arguments 就是传递的 5 个参数的集合（类数组）,所以打印出来还是个类数组
}

知识点：

Untitled

⭐️ NaN / parseInt

parseInt('1a');

// 问：问下面判断 isNaN 的函数正不正确
function isNaN1(num) {
  var res = Number(num);
  if (res == NaN) {
  	return true;
  } else {
  	return false;
  }
}
console.log(isNaN1('abc'));

// 答：不正确，需要改为:
function isNaN1(num) {
  var res = Number(num) + '';
  if (res == 'NaN') {
  	return true;
  } else {
  	return false;
  }
}
console.log(isNaN1('abc'));

知识点：