js函数基本知识

js的函数不同于java的方法，函数没有返回值类型
函数不调用自己不执行
函数名如果冲突，则后面覆盖前面
在Javascript中实参的个数和形参的个数可以不一致
如果形参过多会自动填上undefined(了解即可)
如果实参过多那么多余的实参会被忽略(函数内部有一个arguments,里面装着所有的实参)
函数一旦碰到return就不会在往下执行了函数的结束用return

函数的声明

function 函数名() {
     函数体/代码块;
}

函数的引用

函数名();

例子：

function sayHi() {
   console.log('hello');
}
sayHi();

我们曾经使用的 alert()，parselnt() 这种名字后面跟小括号的本质都是函数的调用

<script>
        // 计算1到100的累加和
        var sum = 0;
        for (let i = 0; i <=100; i++) {
            sum = sum + i;
        }
        // console.log(sum);
        // 封装成函数
        function he(sum1,sum2) {
            var sum = 0;
            for (let i = sum1; i <= sum2; i++) {
                sum = sum + i;
            }
            console.log(sum);
        }
        he(1,100);
    </script>

运行结果：

函数的命名规范：
1、和变量命名基本一致
2、尽量小驼峰式命名法
3、前缀应该为动词
4、命名建议:常用动词约定

//  把计算结果给了getSum(),然后用log把gitSum输出来
        function getSum(x,y) {
            return x + y;
        }//这三行相当于getSum（x,y）=x+y;
        console.log(getSum(1,1));;
  
        // 把计算结果直接输出来
        function getSum1(x,y) {
            console.log(x+y);
        }
        getSum1(1,1);

// 参数默认值   求二个数的和
// x=0,y=0 是默认值
function getSum2(x=0,y=0) {
      return x+y;
   }
console.log(getSum2()); //0
console.log(getSum2(1,1));//2

函数的返回值

1、在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
2、return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换

这个例子除外，依旧可以换行

function fn1() {
            return `
                20
            `;
        }
 console.log(fn1());

3、行写return函数可以没有 return，这种情况函数默认返回值为 undefined

function fn2() {
     var i=1;
     i++;
  }
console.log(fn2());

在Javascript中实参的个数和形参的个数可以不一致

 <script>
        function fn(a,b) {
            console.log(a+b);
        }
        // 1、实参多余形参 剩余的实参不参与运算
        fn(1,2,3);//2  3不会被传递进去
        // 2、实参少于形参 
        fn(1);//NaN 此时的b是undefined 数字+undefined=NaN
        // NaN 即 Not a Number ，不是一个数字。
    </script>

函数中变量的访问原则

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
但是有一种情况，函数内部的形参可以看做是局部变量

 function fn() {
    num=10;//如果把let去掉，则输出的是10，10变成了全局变量
 }
fn();
console.log(num);//10  把num=10加个let

不加let的话，函数内部的num会成为全局变量

// let num=20;
function fn() {
     let num=10;//局部变量，外部不能访问
     num=30;//如果把let去掉，则输出的是10，10变成了全局变量
}
fn();
console.log(num);//10  把num=10加个let

匿名函数-函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用 ，我们将这个称为函数表达式
定义：

let fn=function(){
       console.log('come on!');//函数体
}

调用：

 fn();

与具名函数的对比

 function 函数名(参数（可以不写）) {
         函数体；   
}
    函数名（）；

补充：具名函数的调用可以写在任何位置
而函数表达式必须写在声明之后

p();
let p=function(){
      console.log('--------');
}
        
q();
var q=function(){
     console.log('我是q');
}

立即执行函数

方式1：写法：左边一个括号，右边一个括号；
左边一个括号里加一个匿名函数，右边括号后面加一个分号

// 方式1
( function() {console.log(11);} )();
(function () {})();

方式2：写法：先写一个括号，后面加分号；在这个括号里写一个匿名函数，
再加一个括号

// 方式2
(function() {console.log(22);} ());
(function() {} ());

小栗子：

(function (x,y) {
     console.log(x+y);
})(10,10);

const a = function (i) {
    console.log(i + 1);
}
a(5);

function b(j) {
    console.log(j + 2);
}
b(10);

箭头函数

目标: 能够熟悉箭头函数不同写法

目的:引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁

使用场景:箭头函数更适用于那些本来需要匿名函数的地方

// 普通函数
function fn() {
    console.log(this);//window
}
fn();

// 函数表达式
const fn1 = function () {
    console.log(this);//window
}
fn1();

// 箭头函数
const fn2 = (i, p) => {
    console.log(this);//window
    console.log(`输出是${i + p}`);//100
}
fn2(100, 100);

// 1.只有一个形参的时候，可以省略小括号
const fn3 = j => {
    console.log("j=" + j);
}
fn3(200);

// 2.只有一行代码的情况下，可以省略大括号
const fn4 = k => console.log('木木是🐖吗？' + k);
fn4('yes');

// 3.只有一行代码的情况下，可以return
const fn5 = x => x + x;
console.log(fn5(10));

// 4.可以直接返回一个对象
const fn6 = uname => ({ uname: uname })
console.log( fn6('lxl').uname );

// 箭头函数求和
const getSum = (...arr) => {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum = sum + arr[i];
    }
    return sum;
}
console.log(getSum(1,2,3));

// 以前的this指向，谁调用，this就指向谁
console.log(this);//window
function fn() {
    console.log(this);//window
}
fn();

//对象方法里面的this，指向这个对象
const obj = {
    name: 'lxl',
    sayHi: function () {
        console.log(this);//指向这个对象
    }
}
 obj.sayHi();

// 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。、
const fn1 = () => {
    console.log(this);//window
}
fn1();

const obj1 = {
    name: '李旭亮',
    sayHi: () => {
        console.log(this);//window
    }
}
obj1.sayHi();

// 箭头函数里面没有this，然后就往上一层找this，上一次的作用域指向window
const obj2 = {
    name: '叶林林',
    sayHi: function () {//这个函数里面有this
        console.log(this);//指向obj2
        const fn = () => {
            console.log(this);//指向obj2
        }
        fn();
    }
}
obj2.sayHi();
// 箭头函数fn里面没有this,然后就往上一级找this,即obj2

目标: 能说出箭头函数的this指向

箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this!
1.箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的
2.箭头函数中的this引用的就是最近作用域中的this
3.向外层作用域中，一层一层查找this，直到有this的定义

同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数

总结:
1.函数内不存在this，沿用上一级的
2.不适用
构造函数，原型函数，dom事件函数等等
3.适用
需要使用上层this的地方
4.使用正确的话，它会在很多地方带来方便，后面我们会大量使用慢慢体会。

关于箭头函数this的指向问题：

箭头函数中有this吗

箭头函数中是存在this关键字的，但它与普通函数的this所指向的对象有所不同。

在箭头函数中，this关键字指向定义时的上下文环境（即所处的词法作用域），而不是函数被调用时的上下文环境。这意味着如果箭头函数被定义在某个对象中，它的this就指向该对象；如果它被定义在全局作用域中，它的this就指向window对象。

因此，箭头函数比普通函数更加便于使用和理解，也能够有效地避免一些由this指向混乱所引发的问题。

说说你对箭头函数中this的理解：

箭头函数中的 this 指向定义时所在的词法作用域内的 this，与普通函数不同。当箭头函数被调用时，无论执行上下文如何变化，this 值都不会改变。

这种机制使得箭头函数更容易使用和简洁，尤其是在需要访问外部定义的 this 时特别有用。但要注意，在箭头函数内部使用 this 前必须确认它存在，否则 this 将引用到全局对象（浏览器环境）、模块对象（Node.js 环境）或者 undefined。

总之，要正确理解箭头函数中的 this，关键在于理解箭头函数的词法作用域。如果熟练掌握 this 的各种绑定方式，就能够更好地利用箭头函数来编写简洁、高效的代码。

箭头函数到底有没有this？

箭头函数确实有this关键字，但是其this指向的是函数定义时所在的词法作用域的this值，而不是函数调用时的this值。这意味着箭头函数的this值在定义时就已经确定，而不会随着函数的调用或上下文的改变而改变。因此，可以说箭头函数没有动态绑定的this，它与普通函数的this行为有所不同。

普通函数的this是谁调用，他就指向谁，而箭头函数中的this，是由定义他时的函数作用域所决定的。我说的对吗？

普通函数中的this关键字指向调用该函数的对象，而箭头函数中的this指向定义该函数时所在的词法作用域，与调用位置无关。

constructor属性

在哪里?每个原型对象里面都有个constructor 属性(constructor 构造函数)
作用:该属性指向该原型对象的构造函数，简单理解，就是指向我的爸爸，我是我爸爸的孩子

//构造函数
function Star() {
    // console.log('--------------');
}
const lxl=new Star();
console.log(Star);//ƒ Star() { } 

console.log(Star.prototype); //包含了constructor  

即：constructor 在原型对象里面

console.log(Star.prototype.constructor); //ƒ Star() {} 

Star是个构造函数， Star.prototype.constructor的输出结果也是构造函数

console.log(Star===Star.prototype.constructor);//true

• 如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.
• 但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了
• 此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数

function Star() {

}
Star.prototype.sing = function () {
    console.log('唱歌');
}
Star.prototype.dance = function () {
    console.log('跳舞');
}
console.log(Star);
console.log(Star.prototype);

function Hero() {

}
Hero.prototype = {
    sing: function () {
        console.log('唱歌');
    },
    dance: function () {
        console.log('跳舞');
    }
}
console.log(Hero);
console.log(Hero.prototype);

Hero.prototype = {
            // 手动利用constructor指回Star构造函数
            constructor:Star,
            sing: function () {
                console.log('唱歌');
            },
            dance: function () {
                console.log('跳舞');
            }
        }
        console.log(Hero);
        console.log(Hero.prototype);

思考：

原型对象

function Star(name) {
    this.name = name;
}
const lxl=new Star('李旭亮');
console.log(lxl);
console.log(Star.prototype);
console.log(Star.prototype.constructor);
console.log('----------下面创建对象原型-----------');
console.log(lxl.__proto__);
console.log(lxl.__proto__.constructor);

对象的继承.prototype与.prototype.constructor

需求：让男人继承人类的属性

// 先创建一个对象【大范围】
const Person={
    eyes:2,
    head:1,
}
console.log(typeof Person);

// 再创建具体的对象
function Man() {
    
}
//继承的重要写法******************************
Man.prototype=Person;
// 指回原来的构造函数*************************
Man.prototype.constructor=Man;
// 实例化对象
const lxl=new Man();
console.log(lxl.eyes);//2

call改变this指向

function fn() {
    console.log(this);//指向window
}
fn();

obj = {
    uname: 'lxl',
}
//1.调用函数
//2.改变this指向
function fn(x, y) {
    console.log(this);
    console.log(x + y);
}
fn.call(obj, 1, 2);

apply改变this指向

obj = {
    name: 'lxl',
}
function fn(x, y, z) {
    console.log(this);//Object
    console.log(x + y + z);//6
}
//1.调用函数
//2.改变this指向
fn.apply(obj, [1, 2, 3])

// 求数组最大值
const arr=[351,132,5555];
const max=Math.max.apply(Math,arr);
// 如果不想改变this指向，可以写个null，但是不可以省略
const min=Math.min.apply(null,arr);
console.log(max,min);
// 展开运算符求数组最大值
console.log(Math.max(...arr));

bind()改变this指向

因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind，比如改变定时器内部的this指向.

const obj = {
    age: 18,
}
// 1.bind不会调用函数
// 2.可以改变this指向
// 3.返回值是个函数 但这个函数里面的this是更改过的obj
function fn() {
    console.log(this);
}
const fun = fn.bind(obj);
fun();  //指向obj

// 点击按钮禁用2s后放开
const btn = document.querySelector('button');
btn.addEventListener('click', function () {
    this.disabled = true;
    //在这个普通函数里，需要将this由原来的window改为btn
    setTimeout(function () {
// 因为setTimeout的this指向window，所以需要改变this指向
        this.disabled = false;
    }.bind(this), 2000)
})