이 기사에서 제공하는 내용은 자바스크립트 함수를 정의하는 방법입니다. js 함수의 일반적인 사용법에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
JS 함수, 함수 선언, 함수 표현식, 함수 스타일 생성자, Es6 화살표 함수를 포함한 자체 실행 함수, 클래스 클래스 작성 방법, 고차 함수, 함수 제한/을 작성하는 방법이 많다는 것을 알고 있습니다. 기능 방지 Shake, 이제 위 유형 중 가장 기본적인 사용법에 대해 이야기하겠습니다.
함수 선언적 작성
이 작성 방법은 가장 기본적인 작성 방법입니다. function 키워드를 사용하여 함수를 정의하면 함수가 선언된 직후에 실행됩니다. 우리는 그것이 필요합니다. 이 함수는 동일한 이름을 가진 두 개의 선언적 함수가 있는 경우 두 번째 함수가 첫 번째 함수를 덮어씁니다.
function Test(){
} 로그인 후 복사
다음과 같이 출력에 대해 묻는 인터뷰 질문이 있습니다.
function test1(){
alert('test1')
} ;
test1() ;
function test1(){
alert('test2')
} ;로그인 후 복사
답은 'test2'입니다.
함수 표현식 작성 방법
실제로 간주할 수 있는 함수를 가리키는 변수를 정의합니다. 익명 함수로. 이러한 종류의 함수는 선언된 후에만 호출할 수 있습니다. 선언되기 전에 호출하면 오류가 보고됩니다.
var test=function(){
}로그인 후 복사
다음과 같이 출력을 요구하는 인터뷰 질문이 있습니다.
var test=function(){ alert('test1') } ;
test() ;
var test=function(){ alert('test2') } ;로그인 후 복사
답은 test1
함수 스타일 생성자
JavaScript 함수 생성자(Function())의 인스턴스화를 통해 함수를 정의합니다. 이전에는 함수의 반환 값이나 출력을 정의하는 것은 일반적으로 사용되지 않습니다.
var test= new Function("a", "b", "return a * b");
test();로그인 후 복사
자체 실행 함수
이런 종류의 함수에는 이름이 없고 선언 본문만 있습니다. 실제로는 익명의 자체 호출 함수입니다. 이러한 종류의 함수의 장점은 변수를 독립적으로 유지하고 외부 변수에 의해 오염되지 않아 폐쇄된 함수 실행 환경을 형성한다는 것입니다.
작성 방법은 다음과 같습니다.
(function(){
})();
这种写法比较常见，比如Jquery框架里面就用到这种写法:
‘use strict’;
；(function(context,win){
})(Jquery||undefined,window)로그인 후 복사
클로저와 같은 작성 방법도 있습니다. 다음과 유사한 면접 질문 작성 방법을 자주 접하게 됩니다.
var ps=tr.getElementsByTagName("p");
for(var i=0;i<ps.length;i++){
(function(p){
p.onclick=function(){
alert(this.innerHTML);
}
})(ps[i])
}로그인 후 복사
화살표 함수
이 선언 방법은 Es6에서 도입되었습니다. 화살표 함수는 단축 함수 표현식이며 내부적으로 this는 자신을 가리키는 것이 아니라 현재 실행 환경의 최상위 개체(예: 창, 반응 구성 요소에서 현재 클래스의 상위 구성 요소를 가리킴)를 가리킵니다. 구성 요소) 화살표 기능은 항상 익명입니다.
const test=()=>{
}로그인 후 복사
예를 들어 아래 함수의 this는 window
const test={
array:[1,2],
show:()=>{
console.log(this. array)
}
}
test.show()；//undefined로그인 후 복사
를 가리키고, 아래 React 컴포넌트의 onSearch에서는 이를 통해 Test 컴포넌트를 가리키는 함수나 상태를 찾을 수 있습니다. Test 구성 요소 아래에 정의된 props입니다. 생성자에 주석 처리된 코드는 onSearch의 테스트 구성 요소를 가리키는 것입니다. 이는 화살표 함수와는 다른 두 가지 방식으로 작성되었지만 동일한 효과를 갖습니다.
import {Button} from 'antd'
class Test extends Component {
constructor(props) {
super(props);
//this.onSearch = this.onSearch.bind(this)
}
//onSearch(){
console.log(this);
//}
onSearch=()=>{
console.log(this);
}
render() {
return ( < p >
<Button onClick={this.onSearch}>测试</Button>
< /p>
)
}
}로그인 후 복사
Class클래스 작성 방법
Js에는 이전에는 클래스라는 개념이 없었습니다. 이전에는 함수의 인스턴스에 일부 속성을 탑재하거나 프로토타입을 통해 함수 기반 클래스의 개념을 구현했습니다. 예를 들어, 다음 작성 방법
function Test (){
this.name=’’;
//this.show=function(){
//}
}
Test.prototype.show=function(){
Console.log(this.name)
}
new Test().show();로그인 후 복사
ES6에서는 클래스라는 개념을 객체의 템플릿으로 도입합니다. 클래스는 class 키워드를 통해 정의할 수 있습니다. 기본적으로 ES6 클래스는 단지 구문 설탕으로 간주될 수 있습니다. 새로운 클래스 작성 방법은 객체 프로토타입 작성을 더욱 명확하게 만들고 객체 지향 프로그래밍의 구문과 더 유사하게 만듭니다.
기본 작성 방법:
class test {
//第一种
Show() {
alert('show');
}
//第二种
//Show=()=>{
//}
}
var test1 = new test();
var test2= new test();로그인 후 복사
이 클래스에서 이 두 가지 방법의 작성 방법이 다릅니다
첫 번째 선언된 방법은 test
test1의 프로토타입을 가리킵니다. Show=== test2.Show//true
두 번째로 선언된 메서드는 테스트 인스턴스를 가리키며 각 인스턴스화에 대해 Show 메서드가 생성됩니다.
test1.Show=== test2.Show//false
상속은 다음과 같이 작성하므로 newTest가 test에서 Show를 상속받게 됩니다
class newTest extends test{
Show() {
super. Show();
alert('newshow');
}
}
var test=new newTest ();
test. Show()로그인 후 복사
newTest에 Show 메소드가 선언되어 있지 않으면 상위 클래스의 Show 메소드가 test가 호출되고, 선언되면 newTest의 Show 메소드가 호출됩니다. 상위를 호출하는 하위 메소드는
super.Show()와 같은 슈퍼 키워드를 사용하여 액세스됩니다.
영어. JavaScript 함수는 실제로 변수를 가리킵니다. 변수는 함수를 가리킬 수 있고 함수 매개변수는 변수를 받을 수 있으므로, 함수는 다른 함수를 매개변수로 받을 수 있습니다. 간단히 말하면 "고차 함수는 함수를 매개변수로 받거나 함수를 반환 값으로 받을 수 있는 함수이다." 실제로 가장 일반적인 응용은 콜백 함수이다.
고차 함수의 시나리오는 일반적으로 다음과 같습니다
1. 함수 콜백
$.get(‘’,{},function(data){
})
var test=function(callback){
callback.apply(this,arguments)
}로그인 후 복사
2. 함수 currying
먼저 함수에 여러 매개변수를 채우고 새 함수를 반환하는 기술을 currying이라고 합니다. 이 정의는 약간 이해하기 어려울 수 있습니다. 먼저 간단한 함수 커링의 구현을 살펴보겠습니다.
var currency=function(fn){
var self=this;
var arr=[];
return function(){
if(arguments.length==0){
return fn.apply(this,arr );
}else{
[].push.apply(arr,arguments);
return arguments.callee;
}
}
}로그인 후 복사
그런 다음 호출을 살펴보세요.
var sum=function(){
var total=0;
var argArr=arguments;
for (var i = 0; i < argArr.length; i++) {
total+=argArr[i];
}
return total;
}
var test= currency(sum);
test(100,200);
test(300)
alert(test());로그인 후 복사
其实简单的解释就是currency函数里面定义一个局部变量arr数组,然后返回一个函数，返回的函数体里对变量arr进行了赋值，每次当函数传入参数的时候都会将参数push到arr里面，然后返回函数体，形成了一个闭包。当没有参数传入的时候就直接执行传入的sum函数，然后执行函数sum传入的的参数就是arr.
3.函数扩展
函数扩展一般是通过原型来扩展，传入一个回调函数，比如给Array扩展一个函数Filter代码如下:
Array.prototype.Filter=function(callback){
…..
}로그인 후 복사
做过react 开发的都知道有高阶组件的概念，其实高阶组件是通过高阶函数演变的，只不过传入的参数是组件，然后返回值是一个组件，来看下面的一段代码
export default simpleHoc(Usual);
import React, { Component } from 'react';
const simpleHoc = WrappedComponent => {
console.log('simpleHoc');
return class extends Component {
render() {
return <WrappedComponent {...this.props}/>
}
}
}
export default simpleHoc;로그인 후 복사
函数节流/函数防抖
一般做前端时间比较长的人对这个概念比较熟了，但是刚接触的人估计会有点懵逼。
这两个概念都是优化高频率执行js代码的一种手段，来看下他们的基本概念
函数节流：函数在设定的时间间隔内最多执行一次
应用场景：高频率点击事件
var isEnable=true;
document.getElementById("testSubmit").onclick=function(){
if(!isEnable){
return;
}
isEnable=false;
setTimeout(function(){
console.log("函数节流测试");
isEnable = true;
}, 500);
}로그인 후 복사
函数防抖：函数在一段时间内不再被调用的时候执行
应用场景：onresize onscroll事件，oninput事件
Var timer=null;
Window. onscroll=function(){
clearTimeout(timer);
timer = setTimeout(function(){
console.log("函数防抖测试");
}, 500);
}로그인 후 복사
从上面两个事件可以看出来区别：
函数节流在第一次操作之后的500毫秒内再次点击就只执行一次，不会重置定时器，不会重新计时
函数防抖是在持续触发onscroll事件的时候会重置重置定时器，重新计时,直到不触发事件的500毫秒之后执行一次
위 내용은 자바스크립트 함수를 정의하는 방법은 무엇입니까? js 함수의 일반적인 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
