JavaScript学习基础篇(六)

小半 • 2022年11月1日下午6:10 • 前端开发 • 阅读 245

JavaScript 函数

文章目录

1.函数的定义

//方法1 直接定义
function Demo(){
    console.log("Hello");
};
Demo();//调用函数

//方法2 此时x就是Demo函数
var x=function Demo(){
    console.log("把函数存在变量中");
};
//调用函数的方法
x();//执行方法
alert(x);//打印函数模板

1.2自调用函数定义

(function Demo(){
    //直接在控制打印结果
    console.log("调用自己");
})();

1.3箭头函数的定义

Demo = () => console.log("这是一个箭头函数");
// Demo 是名称  ()//表示参数 一个参数可以不带括号
Demo();

2.在表达式中使用函数

function Demo(){
    return 1+1;
}
var x=Demo()*100;
console.log(x); //打印200

3.this的使用

//this 的用法 表示本类对象
var x={
   Name:"张三",
   age:10,
   Sex:"男",
   F:function Demo(){
    return "姓名:"+this.Name+" "+"性别:"+this.Sex+" "+"年龄:"+this.age; //this为X对象
   } 
}
var y=x.F();
console.log(y); // 姓名:张三 性别:男 年龄:10

//带参调用 暂无对象的情况
function MyDemo(a,b){
  this.name=a;//还为确定对象
  this.age=b;
  console.log(this);//此时的this是  MyDemo {name: 'Name', age: 18}
}
var x=new MyDemo("Name",18); //创建对象 这里是构造器创建对象
var y=x.name;
console.log(y); //输出Name

4.call 和 apply 显示函数绑定

直接看代码：

//只传对象使用call
var Demo ={
    Name:function(){
        return  "姓名:"+this.Name+" "+"年龄:"+this.age+" "+"性别:"+this.Sex; 
    }
}
var Demo01={
    Name : "王五",
    age:18,
    Sex:"男"
}
var x=Demo.Name.call(Demo01);//传入Demo01对象 此时的this是Demo01对象
console.log(x);
//对象加参数
var Demo ={
    Name:function(a,b){
        return  "姓名:"+this.Name+" "
        +"年龄:"+this.age+" "+
        "性别:"+this.Sex+" "+"工作:"+a+" "+"薪水:"+b; 
    }
}
var Demo01={
    Name : "王五",
    age:18,
    Sex:"男"
}
var x=Demo.Name.call(Demo01,"保安","5W");//传入Demo01对象 此时的this是Demo01对象
console.log(x);//姓名:王五 年龄:18 性别:男 工作:保安 薪水:5W

call 和 apply不同点：

var Demo ={
    Name:function(a,b){
        return  "姓名:"+this.Name+" "
        +"年龄:"+this.age+" "+
        "性别:"+this.Sex+" "+"工作:"+a+" "+"薪水:"+b; 
    }
}
var Demo01={
    Name : "王五",
    age:18,
    Sex:"男"
}
var x=Demo.Name.apply(Demo01,["保安","5W"]);//apply和call只是参数类型不同 apply是数组类型
console.log(x);//姓名:王五 年龄:18 性别:男 工作:保安 薪水:5W