1-4-3-js-核心语法-引用数据类型:函数Function 类型(包括箭头函数)

js里面函数也是一个对象,js里面除了基本数据类型,其他的都是对象,

普通对象只能装属性,但是函数可以封装一些功能,

创建一个函数对象:函数定义

第一种方法,使用function 关键字 声明一个函数,

function func1(a){console.log(a)}

// 被声明的函数不会直接执行。而是调用的时候才会执行,

// typeof func1; 这是一个function类型,

第二种方法使用函数表达式

使用变量接收函数,这个是一个匿名函数,

var func = function(a){console.log(a)}

//匿名函数可以使用一个变量接收函数,可以使用函数名()调用,

第三种方法,使用new关键字创建一个函数,

但是开发中几乎不使用这种new的方式创建函数,

var func = new Function();
//通过名为 Function() 的内建 JavaScript 函数构造器来定义。

第四种方法:箭头函数

箭头函数允许使用简短的语法来编写函数表达式。
您不需要 function 关键字、return 关键字和花括号。

实例:

// ES5
var x = function(x, y) {
  return x * y;
}

// ES6
const x = (x, y) => x * y;

箭头函数没有自己的 this。它们不适合定义对象方法。
箭头函数未被提升。它们必须在使用前进行定义。
使用 const 比使用 var 更安全,因为函数表达式始终是常量值。
如果函数是单个语句,则只能省略 return 关键字和大括号。因此,保留它们可能是一个好习惯:
IE11 或更早的版本不支持箭头函数。

const x = (x, y) => { return x * y };

函数的参数,arguments,

// 函数在调用的时候,会传入两个隐含的参数,1个是函数的上下文this,第二个是封装了实参的对象,arguments,

// 这个arguments可以获取长度,也可以通过索引取值,

// 调用函数的时候,传入的实参,都会封装到这个argument里面,

function func1(a,b,c){console.log(arguments)}

func1(); // 这个是返回一个arguments对象,

function func1(a,b,c){console.log(arguments.length)}

func1(1,2,3); // 这个是返回3,参入实参的长度,

function func1(a,b,c){console.log(arguments[2])}

func1("a","b","c"); // 这个是返回c,

// 调用的时候,如果传递的超出定义的,超出的不起作用,并不会导致程序报错,
//如果传递的参数少于定义的,未定义的就会显示undefined,也不会程序报错,
//这是js比较随便的地方,

this关键词

这个也是函数调用的时候,默认必传的参数之一,

如果是在函数内部找,这个this,就是window这个对象,

this是一个对象,是函数执行的上下文对象,

但是这个this,不是一直是window,而是和函数调用方式的不同,this指向不同的对象,

就是两种情况,

1,以函数调用的方式,this就是window这个对象

function func1(){console.log(this)}

func1(); 这个this打印出来就是Window对象,

2,如果是方法的调用,就是哪一个对象调用的,this就是这个对象,

var obj = {"name":"tom","sayname":function(){console.log(this)}}

obj.sayname(); // 这个this就是这个obj对象,

函数的调用

第一种调用方法:

//上面定义的函数,都是使用函数名()调用的,

第二种调用,立即执行函数

//先写两个括号,第一个括号内部定义,第二个括号内部传递具体的参数
(function (a,b) {
  console.log("立即执行函数");
  console.log(a+b)
})(11,222);

第三种调用,call()和apply()

 
可以修改函数的this,

var person = {
firstName:"Steve",
lastName: "Jobs",
fullName: function() {
return this.firstName + " " + this.lastName;
}}
var person1 = {
firstName:"Bill",
lastName: "Gates",
}

person.fullName();  // 返回"Steve Jobs"

person.fullName.call(person1); // 返回"Bill Gates"   修改了this的值,

 

还可以传递参数:

var person = {
firstName:"Steve",
lastName: "Jobs",
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates",
}

person.fullName.call(person1, "Seattle", "USA");  // 返回"Bill Gates,Seattle,USA"

call()和apply()区别:

这两个的用法很类似,但是传值的方式有差异,

apply需要传递一个数组的参数才可以,

person.fullName.apply(person1, ["Seattle", "USA"]); // 返回"Bill Gates,Seattle,USA"

posted @ 2021-08-13 12:46  技术改变命运Andy  阅读(49)  评论(0编辑  收藏  举报