1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ES6/03/函数的定义方式和调用方式 函数内的this指向 改变函数中this指向的三个方法(

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

时间:2022-10-09 09:58:13

相关推荐

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

函数的定义方式

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;//方法1this.disabled = false;//定时器函数里面的this指向的是window,这里需要用bind()改变this指向}.bind(this), 3000);//这个this指向的是btn对象,这里属于btn.onclick = function(){}这个函数的内容}</script></body></html>

@沉木

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。