# 代码运行结果

# 考察原型链


Function.prototype.a = 'function';
Object.prototype.a = 'object';

function Person () {};
let child = new Person();

console.log(child.a); // 'object'
console.log(Parent.a); // 'function'

# 考察this指向

var obj = {};
obj.fun = function foo() {
    console.log(this);
    return () => {
        console.log(this);
        return () => console.log(this);
    }
}
obj.fun()()();

全部是 { fun: [Function: foo] }

# 考察this指向

对象

const obj = {
  age: 9,
  height: 190,
  getAge: () => {
    console.log(this); //window
    console.log("age", age); //ReferenceError: age is not defined
    return age;
  },
  getName: function () {
    console.log(this); //age: 9, height: 190, getAge: ƒ, getName: ƒ
    console.log("name", height); //ReferenceError: height is not defined
    return height;
  },
};

obj.getAge();
obj.getName();

函数

function People(age, height) {
  // 构造器
  this.age = age;
  this.height = height;

  getAge: () => {
    //没用 和 People 没关系
    console.log(this);
    console.log("age", age);
    console.log("widow age", window.age);
    return age;
  };

  const getAge = function () {
    //没用 和 People 没关系
    return this.age;
  };

  this.getAge1 = function () {
    console.log(this); //People{}
    return this.age;
  };

  this.getAge2 = () => {
    console.log(this); //People{}
    return this.age;
  };

  this.getHeight1 = function () {
    console.log(this); //People{}
    return this.height;
  };

  this.getHeight2 = () => {
    console.log(this); //People{}
    return this.height;
  };

  console.log(this); //People{}
}

const people = new People(18, 180);

console.log(people.getAge1()); //18
console.log(people.getAge2()); //18
console.log(people.getHeight1()); //180
console.log(people.getHeight2()); //180

function foo() {
  console.log(this);
  console.log(this.a);
}

function doFoo() {
  console.log(this);
  foo();
}

var obj = {
  a: 1,
  doFoo: doFoo,
};

var a = 2;
obj.doFoo();

//2

# 考察宏任务，微任务，事件队列

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}

async function async2() {
  console.log("async2");
}

console.log("script start");

setTimeout(() => {
  console.log("setTimeout");
}, 0);

requestAnimationFrame(() => {
  // 注意这个函数
  console.log("requestAnimationFrame");
});

async1();

new Promise((resolve) => {
  console.log("promise");
  resolve();
}).then(() => {
  console.log("then");
});

console.log("script end");

/*
script start
async1 start
async2
promise
script end
async1 end
then

requestAnimationFrame <= 不算宏任务，也不算微任务在渲染前执行
setTimeout

chrome: requestAnimationFrame在setTimeout前
safari: requestAnimationFrame在setTimeout后
firefox: requestAnimationFrame在setTimeout后

*/

# 考察parseInt函数

结果：

['1', '2', '3'].map(parseInt) 

结果: [1, NaN, NaN]

分析：

map 函数参数：
arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array } [, thisArg])
parseInt 函数参数：parseInt(string, radix)

parseInt('1', 0) //radix为0时，且string参数不以"0x"和"0"开头时，按照10为基数处理。这个时候返回1
parseInt('2', 1) //基数为1（1进制）表示的数中，最大值小于2，所以无法解析，返回NaN
parseInt('3', 2) //基数为2（2进制）表示的数中，最大值小于3，所以无法解析，返回NaN

# 考察隐式类型转化

[]==false  

转为数字 0==0 
结果为true

![]==false 

转为布尔 false==false 
结果为true

[] == ![]

分析：[] 引用类型转化为布尔值为 true, ![] 为false
false 转化为 number 时为0
[] 转化为 number 时为0

转为布尔 0==0 
结果为true

参考：JavaScript 类型

# 考察Promise链

Promise.resolve(10)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log);

//10

Promise.resolve方法的参数如果是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为resolved， Promise.resolve方法的参数，会同时传给回调函数。 then方法接受的参数是函数，而如果传递的并非是一个函数，它实际上会将其解释为then(null)，这就会导致前一个Promise的结果会传递下面

# 考察Promise链

const p = new Promise((resolve) => {
  console.log("promise1");
  setTimeout(() => {
    console.log("timestart");
    resolve("success");  //<== 执行慢于timeend
    console.log("timeend");
  }, 0);
  console.log("promise2");
});

p.then((res) => {
  console.log("res", res);
});

console.log("100");

/*
promise1
promise2
100
timestart
timeend
success
*/

# 作用域

(function () {
  var x = (y = 1);
})();
var z;

console.log(y); // 1
console.log(z); // undefined
console.log(x); // Uncaught ReferenceError: x is not defined

这段代码的关键在于：var x = y = 1; 实际上这里是从右往左执行的，首先执行y = 1, 因为y没有使用var声明，所以它是一个全局变量，然后第二步是将y赋值给x，讲一个全局变量赋值给了一个局部变量，最终，x是一个局部变量，y是一个全局变量，所以打印x是报错

← 前端工程化编程实战 →