ES6/03/函数的定义方式和调用方式，函数内的this指向，改变函数中this指向的三个方法(call(),apply(),bind())

最新推荐文章于 2023-03-22 21:34:57 发布

浅香沉木

最新推荐文章于 2023-03-22 21:34:57 发布

阅读量388

点赞数 1

文章标签： es6/es7

本文链接：https://blog.csdn.net/Java_53/article/details/106439431

版权

函数的定义方式

1，自定义函数（命名函数）
function fun(){};
2,函数表达式（匿名函数）
var fun =function(){};
3，利用new Function( ‘参数1’ , ‘参数2’ ,‘参数n’, ‘函数体’ );
var _ =new Function(‘console.log(“利用内置函数类创建函数”)’);

JS中万物兼对象，所有的函数都是Function 的实例（对象），函数也属于对象；

函数的调用方式

1，普通函数
2，对象的方法
3，构造函数
4，绑定事件函数
5，定时器函数
6，立即执行函数
<!DOCTYPE html>
<html lang=“en”>

<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>函数的调用方式</title>
<script type=“text/javascript”>
//函数的调用
//1,普通函数的调用
function fn() {
console.log(“人生巅峰”);
}
fn();
fn.call();
//2,对象的方法
var s = {
say: function () {
console.log(“人生巅峰”);
}
}
s.say();
//3,构造函数
function Star() {
new Star();
}
//4,绑定事件函数
btn.onclick = function () {//点击按钮时执行的函数
};
//5,定时器函数
setIterval(function () { }, 1000);//这个是定时器隔1秒就调用一次的函数
//6，立即执行函数
(function () {
console.log(“人生巅峰”);
})();
</script>
</head>

<body>

</body>

</html>

改变this指向的方法

1，函数对象的call方法

函数对象中的call方法：1，可以调用函数，不常用
2，改变函数内的this指向；
一般使用的形式是：
函数名.call(this,属性1,属性2,属性n);
call的主要作用是用来改变父类中的this指向子类的实例或其它以实现继承；

2，函数对象的apply方法

1，apply方法也是调用函数第二个可以改变函数内部的this指向；
2，但是它的参数必须是数组（或伪数组）；
3，apply的主要应用，比如说我们apply借助数学内置对象求最大值；
例：var arr=[1,66,99,4];
var max = Math.max.apply(Math,arr);
console.log(max);
输出max为99；

3，bind()方法，不调用函数，改变this指向

1，不会调用原来的函数，可以改变原来函数的this指向；
2，返回的是原函数改变this之后产生的新函数；
3，bind()的主要应用：如果有的函数我们不需要立即调用，但是又想改变这个函数内部的this指向此时用bind()方法
如：有一个按钮，当点击后就禁用，3秒钟后重新开启这个按钮；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this指向_bind()方法</title>
</head>

<body>
    <button>点击</button>
    <script>
        /* 一个按钮，点击后禁用此按钮，3秒后重新开启 */
        var btn = document.querySelector('button');
        btn.onclick = init;
        function init() {
            this.disabled = true;//此this指向btn按钮
            //var that =this;//方法1：用一个变量保存此时的this,再用that使用其它功能
            window.setTimeout(function () {
                //that.disabled =false;//方法1
                this.disabled = false;//定时器函数里面的this指向的是window,这里需要用bind()改变this指向
            }.bind(this), 3000);//这个this指向的是btn对象，这里属于btn.onclick = function(){}这个函数的内容
        }
    </script>
</body>

</html>