Javascript - 函数分类 & this指向

更新日期: 2021-06-04阅读: 1.4k标签: this

JS中定义函数的三种方式

通过实例来说明吧

<script>
//method1
function fn() {
console.log('fn created ');
}
//method2
var fn2 = function () {
console.log('fn2 created');
}
//method3
var fn3 = new Function('test', 'console.log(test);');
fn3('fn3 test');
console.dir(fn3);
console.log(fn3 instanceof Object);
</script>

运行上面例子,证明了函数也是对象。可以采用new + 构造函数的方式创建实例,第三种方式执行效率低。


函数的原型链


从结果可以看到Function原型对象的__proto__指向Object。



JS中函数的分类和调用方式

通过实例来说明吧

<script>
//函数的分类和调用方式
//方式1 普通标准函数,this 指向window
function fn() {
console.log('fn1'+ this);
}
fn(); //本质是window.fn(); 全局函数是window的成员
//方式2 对象的方法 this 指向调用者o
var o = {
sayHi: function () {
console.log('fn2'+this);
}
}
o.sayHi();

//方式3 构造函数 this指向新创建的对象,这里指向star1
function Star(username){
this.username = username;
}
var star1 = new Star('ldh');

//方式4 绑定事件函数 this 指向函数的调用者 btn
var fn = function (){
console.log('btn 被点击了'+ this);
}
btn.onclick = fn;
//点击了按钮就可以调用函数

//方式5 定时器函数 定时器实际是window成员 所以this 就是window
setInterval(function(){},1000);
//定时器按照设定的时间间隔去调用

//方式6 立即执行函数 this 是window 同方式一

(function(){console.log('function executed')})();
//不需要调用立即执行


</script>

通过上面的例子,基本上归纳了笔者了解的函数使用方式。通过方式4和方式6的对比,

我们可以知道函数后面加了() 表示立即调用,没加(),表示函数的指针,只是指明函数不调用函数。
this 指向问题,牢记this指向调用者


改变this 指向的三个函数

this 指向是JS中很重要的问题,在上面的函数分类中,已经有了系统的分析。下面重点总结改变this 指向的三个函数

call

把父类实例改成子类实例 实现属性继承

<script>
//call function
function Father(username, age) {
this.username = username;
this.age = age;
}

function Son(username, age, gender) {
Father.call(this, username, age);//实现继承父类的属性
this.gender = gender;
}
</script>


apply

apply 和call 不同点,参数是数组(伪数组)。在apply内部会把数组拆成元素

主要使用 借助Math对象,Math.max.apply(Math, [4324, 45, 342, 23])

<script>
//apply function
var o = {
username: 'testuser'
};
function fn(arr) {
console.log(arr);
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);

}
console.log(this);
}

fn.apply(o, [23, 43]);
console.log(Math.max(43, 45, 243, 342));
console.log(Math.max.apply(Math, [4324, 45, 342, 23]));
</script>


bind

只改变this 的指向 不调用函数

用途改变绑定事件的this,案例

<body>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<script>
//bind function
//案例:实现多个按钮发送验证码后 3s 可以再次发送
var btns = document.querySelectorAll('button');
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
this.disabled = true;
setTimeout(function () {
this.disabled = false;//改变this 指向btn ,3000ms 后执行
}.bind(this), 3000);
}
}
</script>
</body>



链接: https://fly63.com/article/detial/10392

解读Javascript中的this机制,别再为了 this 发愁了

JavaScript中有很多令人困惑的地方,或者叫做机制。但是,就是这些东西让JavaScript显得那么美好而与众不同。比方说函数也是对象、闭包、原型链继承等等,而这其中就包括颇让人费解的this机制。

js中this的详细解释,JavaScript中this绑定规则【你不知道的JavaScript】

this的绑定过程之前的调用栈 和 调用位置,this绑定规则:1、默认模式,2、隐式绑定,3、显式绑定,4、new绑定

JavaScript中this的运行机制及爬坑指南

在 JavaScript 中,this 这个特殊的变量是相对比较复杂的,因为 this 不仅仅用在面向对象环境中,在其他任何地方也是可用的。 本篇博文中会解释 this 是如何工作的以及使用中可能导致问题的地方,最后奉上最佳实践。

JS中this的指向问题(全)

this关键字在js中的指向问题不管是工作还是面试中都会经常遇到,所以在此对它进行一下总结:全局作用域中、闭包中指window、函数调用模式:谁调用就指谁、构造函数中,this指实例对象、apply/call改变this的指向、bind改变this指向等

彻底淘汰并消除JavaScript中的this

如果这很难明白,为什么我们不停止使用它呢?认真的思考一下?如果你读过 将90%的垃圾扔进垃圾桶后,我如何重新发现对JavaScript的爱, 当我说扔掉它时,你不会感到惊讶,this被丢弃了

JavaScript this常见指向问题

this的用法:直接在函数中使用 谁调用这个函数this就指向谁 ,对象中使用, 一般情况下指向该对象 ,在构造函数中使用

JavaScript函数中this的四种绑定策略

this的四种绑定策略:默认绑定、隐式绑定、显示绑定、new绑定。首先要明确的是一般情况下,this不是函数被定义时绑定,而是函数被调用时被绑定 ,那么函数中的this有四种绑定方式:

改变this的指向

this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象.this永远指向函数的调用者。随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

js手写实现apply,call,bind

apply和call的区别就是传的参数形式不一样。call是一个一个的传,apply可以将参数以数组的形式传进去。而bind是传入第二个和后面的参数,且绑定this,返回一个转化后的函数。

this指向问题的经典场景

以函数形式调用,this指向window;以方法形式调用,this指向调用方法的那个对象;构造函数调用,this指向实例的对象;使用window对象的方法使,指向window;多重场景改变this指向

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!