链式操作

如是实现「对象.方法.方法.方法」这样的链式反操作呢？
可以在方法内返回对象的形式。

  1. var sched = {
  2.   wakeup: function () {
  3.     console.log("跑步");
  4.     return this;
  5.   },
  6.   morning: function () {
  7.     console.log("去购物");
  8.     return this;
  9.   },
  10.   noon: function () {
  11.     console.log("休息一下");
  12.     return this;
  13.   },
  14. };
  15. sched.wakeup().morning().noon();

对象相关的方法和属性

for…in…

:::info for...in...方法可以用来遍历对象。 :::

  1. var car = {
  2.   brand: "Benz",
  3.   color: "red",
  4.   displacement: "3.0",
  5.   lang: 5,
  6.   width: 2.5,
  7. };
  8. for (const key in car) {
  9.   console.log(car[key]); // "Benz" "red" "3.0" 5 2.5
  10. }

**for...in...**遍历会把对象原型上的属性都打印出来！！！

  1. Object.prototype.name = "TestPrototypeAttribute"
  2. var car = {
  3.   brand: "Benz",
  4.   color: "red",
  5.   displacement: "3.0",
  6.   lang: 5,
  7.   width: 2.5,
  8. };
  9. for (const key in car) {
  10.   console.log(car[key]); // "Benz" "red" "3.0" 5 2.5 TestPrototypeAttribute
  11. }

**ECMAScript**中对象的属性是无序的，所有可枚举的属性都会返回一次，但返回的顺序可能会因浏览器而异。
如果for...in...循环要迭代的变量是null或undefined，则不执行循环体。

for...in...也可以用来遍历数组：

  1. var arr = [1, 2, 3, 4, 5];
  2. for (const key in arr) {
  3.   console.log(key); // 1 2 3 4 5
  4. }

obj.hasOwnProperty()

:::info Object的原型方法。
hasOwnProperty()用来判断实例对象本身是否包含某个属性（该方法不会到原型上进行查询） :::

  1. var obj = {
  2.   name: "job",
  3.   age: 32,
  4. };
  5. console.log(obj.hasOwnProperty(obj.name)); // true
  1. Object.prototype.name = "Object";
  3. Car.prototype = {
  4.   lang: 5,
  5.   width: 2.5,
  6. };
  7. function Car() {
  8.   this.brand = "Benz";
  9.   this.color = "red";
  10.   this.displacement = "3.0";
  11. }
  13. var car = new Car();
  15. console.log(car); // Car {brand: 'Benz', color: 'red', displacement: '3.0'}
  17. // 如果不用 hasOwnProperty() 方法然后遍历 car 实例对象的属性
  18. for (const key in car) {
  19.   console.log(car[key]); // "Benz" "red" "3.0" 5 2.5 Object
  20. }
  22. // 使用 hasOwnProperty() 方法判断属性是否属于实例对象本身
  23. for (const key in car) {
  24.   // 只要实例化对象本身的属性
  25.   if (car.hasOwnProperty(key)) {
  26.     console.log(car[key]); // "Benz" "red" "3.0"
  27.   }
  28. }

in 语句

:::info in用来判断实例对象是否包含某个属性，该语句和hasOwnProperty最大的区别就是in语句会到实例对象的原型上查找属性（会到原型上寻找） :::

  1. var car = {
  2.   brand: "Benz",
  3.   color: "red",
  4. };
  6. // 类似 car["displacement"]
  7. console.log("displacement" in car); // false
  1. Car.prototype.displacement = "3.0";
  2. function Car() {
  3.   this.brand = "Benz";
  4.   this.color = "red";
  5. }
  7. var car = new Car();
  8. console.log("displacement" in car); // true

instanceof 语句

:::info instanceof语句用来判断某个对象是否是某个构造函数的实例对象。（类似A对象的原型里到底有没有B构造函数的原型，原型链的关系） ::: instanceof 的原理

  1. function Car() {}
  2. var car = new Car();
  4. console.log(car instanceof Car); // true
  5. console.log(car instanceof Object); // true
  6. console.log([] instanceof Array); // true
  7. console.log([] instanceof Object); // true
  8. console.log({} instanceof Object); // true

所以这就导致了关系不是特别的明确，因为任何对象的原型链顶端都是Object.prototype

更靠谱的方式是调用Object.prototype.toString()方法。

  1. var a = [];
  2. console.log(a.constructor);
  3. console.log(a instanceof Array);
  4. console.log(Object.prototype.toString.call(a)); // 使用 call 改变 this 指向为 a
  6. if(Object.prototype.toString.call(a) === "[object Array]"){
  7.   alert("是数组！")
  8. }

因为Array构造函数重写了toString方法，所以我们只能调用Object.prototype.toString()方法。
image.png
image.png

this 指向

再谈谈this指向的问题

普通函数内部的this默认指向window

  1. function test(b) {
  2.   var a = 1;
  3.   var b = b;
  4.   function c() {}
  5.   this.d = 3; // window.d = 3
  6. }
  8. test(123);
  9. console.log(d); // 3，函数外部是可以直接访问到 d 变量的
  11. // 预编译的过程
  12. /**
  13.  * AO = {
  14.  *    this: window,
  15.  *    argument: [123]
  16.  *    a: undefind,
  17.  *    b: undefind, => 123
  18.  *    c: function
  19.  * }
  20.  * GO = {
  21.  *    d: 3
  22.  * }
  23.  */

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

  1. function Test() {
  2.   this.name = 123;
  3. }
  4. var test = new Test();
  6. /**
  7.  * 实例化对象的执行过程
  8.  * 
  9.  * 1、创建 this 对象
  10.  * var this = {}
  11.  *
  12.  * 2、赋值原型
  13.  * var this = {__proro__: Test.prototype}
  14.  *
  15.  * 3、属性赋值
  16.  * var this = {__proro__: Test.prototype, name: 123}
  17.  *
  18.  * 4、返回 this 并指向实例化对象
  19.  *
  20.  */
  22. // 预编译的过程
  23. /**
  24.  * Test 函数的 AO = {
  25.  *    this: {window 对象} => {__proro__: Test.prototype, name: 123}
  26.  * }
  27.  * GO = {
  28.  *    Test: function
  29.  *    test: undefind => {name: 123}
  30.  * }
  31.  */

callee

:::info callee的作用是指向当前所在函数的引用 :::

  1. function test(a, b, c) {
  2.   console.log(arguments.callee); // 指向当前所在的函数
  3.   // ƒ test(a, b, c) { ... }
  5.   console.log(arguments.callee.length); // 3，形参的长度
  6.   console.log(test.length); // 3，形参的长度
  7.   console.log(arguments.length); // 2，实参的长度
  8. }
  9. test(1, 2);
  1. function test1() {
  2.   // 指向 test1 函数的引用
  3.   console.log(arguments.callee);
  4.   // ƒ test1() {
  5.   //     console.log(arguments.callee);
  6.   //  function test2() {
  7.   //    console.log(arguments.callee);
  8.   //  }
  9.     test2()
  10.   }
  12.   function test2() {
  13.     // 指向 test2 函数的引用
  14.     console.log(arguments.callee);
  15.     // ƒ test2() {
  16.     //  console.log(arguments.callee);
  17.     // }
  18.   }
  19.   test2()
  20. }
  21. test1()

某些时候在使用立即执行函数+递归时比较有用，比如实现函数实现 n-1 的累加

  1. // 普通函数的实现方式
  2. function test1() {
  3.   console.log(arguments.callee);
  4.   function test2() {
  5.     console.log(arguments.callee);
  6.   }
  7.   test2()
  8. }
  9. test1()
  11. // 立即执行函数的实现方式
  12. var sum = (function (n) {
  13.   if (n <= 1) {
  14.     return 1;
  15.   }
  16.   // 当不知道函数名的时候如何递归？
  17.   // 可以调用 callee 属性来拿到当前函数的引用
  18.   return n + arguments.callee(n - 1);
  19. })(10);
  20. console.log(sum)

caller

:::info caller属性返回函数被调用是所在的函数的引用 :::

  1. test1();
  2. function test1() {
  3.   test2();
  4. }
  6. function test2() {
  7.   // 返回当前被调用 test2 函数的函数引用
  8.   // 必须放到一个执行函数内，放到全局无效
  9.   console.log(test2.caller);
  10. }
  12. // 放在全局下无效
  13. test3()
  14. function test3() {
  15.   console.log(test3.caller); // null
  16. }