Skip to content

函数表达式和this

函数表达式

JS中,函数也是一个数据,语法上,函数可以用于任何需要数据的地方

JS中,函数是一等公民

函数是一个引用类型,将其赋值给某个变量时,变量中保存的是函数的地址

函数表达式

js
function a() {
  console.log("asdasdf");
}

var b = a;
console.log(a === b); //true
b(); //asdasdf

函数作为对象属性值

js
var obj = {
  a: "asfd",
  b: 234,
  c: function () {
    console.log("ccccc");
  },
  d: function () {
    console.log("dddd");
  },
};

// console.log(obj.c, typeof obj.c);

var b = obj.c;
b();
obj.d();

函数作为数组元素

js
var arr = [
  34,
  45454,
  "Asdf",
  {},
  function () {
    console.log("数组中的函数");
  },
];

var func = arr[4];
func();

this关键字

this无法赋值

  1. 在全局作用域中,this关键字固定指向全局对象。
  2. 在函数作用域中,取决于函数是如何被调用的
  3. 函数直接调用,this指向全局对象
  4. 通过一个对象的属性调用,格式为对象.属性()对象["属性"](),this指向对象
js
function test() {
  console.log(this); //window
}

var b = test;

b(); //this的指向就是调用的地方
js
function test() {
  console.log(this);
}

var b = test;
var arr = [b, test];
arr[0](); //this指向arr

var obj = {
  a: function () {
    console.log(this);
  },
  b: {
    x: 2342,
    func: function () {
      console.log(this);
    },
  },
};

obj.a(); //this 指向obj

var b = obj.a;
b(); //this指向window

obj.b.func(); //this指向b这个对象
js
var obj = {
  firstName: "袁",
  lastName: "进",
  age: 18,
  sayHello: function () {
    console.log(`我叫${this.firstName}${this.lastName},今年${this.age}岁了`);
  },
};

//
obj.sayHello();
obj.firstName = "姬";
obj.lastName = "成";
obj.age = 108;
obj.sayHello();

//
var obj2 = obj;
obj = 234;
obj2.sayHello();

作业

  1. 新建一个BetterFunction.js, 将之前的MyFunction.js改造成为单对象模式。
js
//单对象模式又叫做命名空间,可以解决变量污染的问题
const BetterFunction = {
  sort: function () {},
  filter: function () {},
};
  1. 写一个函数,为数组排序,要考虑到这个数组的所有可能(sort)
js
// sort
var arr = [2, 6, 1, 3, 9];

function sort(arr, compare) {
  if (!compare) {
    compare = function (a, b) {
      // 这里不用a-b是为了兼容字符串的比较
      if (a > b) {
        return 1;
      } else if (a < b) {
        return -1;
      } else {
        return 0;
      }
    };
  }

  // 排序
  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - i; j++) {
      if (compare(arr[j], arr[j + 1]) > 0) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
}

sort(arr, (a, b) => {
  return a - b;
});

console.log(arr);
  1. 写一个函数,按照指定的条件对某个数组进行筛选 (filter)
js
var arr = [0, 2, 34];

function fliter(arr, cb) {
  let res = [];

  for (let i = 0; i < arr.length; i++) {
    if (cb(arr[i], i)) {
      res.push(arr[i]);
    }
  }

  return res;
}

const newArr = fliter(arr, (item, index) => item > 0);
console.log("newArr", newArr);
  1. 写一个函数,按照指定的条件,得到某个数组中第一个满足条件的元素 (find)
js
var arr = [0, 2, 34];

function find(arr, cb) {
  for (let i = 0; i < arr.length; i++) {
    if (cb(arr[i], i)) {
      return arr[i];
    }
  }
}

const newArr = find(arr, (item, index) => item > 0);
console.log("newArr", newArr);
  1. 写一个函数,按照指定的条件,得到某个数组中满足条件的元素数量 (count)
js
var arr = [0, 2, 34];

function count(arr, cb) {
  var num = 0;
  for (let i = 0; i < arr.length; i++) {
    if (cb(arr[i], i)) {
      num++;
    }
  }
  return num;
}

const num = count(arr, (item, index) => item > 0);
console.log("num", num);

回调函数的最大左右就是让程序变的更加灵活,当某个功能或者条件多种情况且不清晰,都可以传递回调函数来解决。

MIT License