JavaScript 함수를 사용하는 방법 JavaScript 함수의 속성 및 메서드 소개-JS 튜토리얼-php.cn

JavaScript 함수란 무엇인가요? JavaScript의 함수는 실제로 객체입니다. 각 함수는 Function 생성자의 인스턴스이고 Function 생성자가 정의한 속성과 메서드를 갖기 때문입니다. JavaScript 함수의 속성과 메서드를 자세히 살펴보겠습니다.

함수 이름은 실제로 함수 개체에 대한 포인터입니다. 다음 코드를 참조하세요.

    function sum(a,b) {
        return a + b;
    }
    // 相当于把sum的引用地址传递给sum2。
    // 注意：不带圆括号的函数名是访问函数指针，而非调用函数
    var sum2 = sum; 
    sum2(1,2) // 3
    sum = null;
    sum(2,3) // undefined // 将sum的内存回收，即sum的引用地址变了
    sum2(2,3) //5 // 但sum2 还是指向原来的内存地址

로그인 후 복사

위 코드는 함수 이름이 실제로 함수 개체에 대한 포인터라는 문제를 설명할 수 있습니다. 위의 문제를 이해한 후 다음과 같은 분석을 수행할 수 있습니다.

1. 오버로드 없음

위를 이해한 후 오버로드는 함수 변수의 참조 값을 다시 수정하는 것과 동일하므로 이전 나중에 덮어쓰게 됩니다. 예, 이해하기 쉽습니다.

2. 함수 승격

은 실제로 변수 승격과 유사합니다. 즉, 선언적 함수와 표현식 정의 함수의 차이점은 매우 간단합니다.

3. 값으로서의 함수 

함수 이름 자체가 변수이기 때문에 값으로 전달될 수 있습니다. 다음은 좋은 예이자 좋은 프로그래밍 아이디어입니다.

function getSomeFunction(fn,arg) {
    return fn(arg);
} 
function add(num) {
    return num + 10;
}
function getGreeting(name) {
    return `Hello ${name}`;
}
getSomeFunction(add,5) // 15
getSomeFunction(getGreeting,'andy') // Hello andy

로그인 후 복사

다른 함수에서 함수를 반환할 수도 있습니다. 예를 들어 배열의 정렬 방법이나 반복 방법을 사용할 때 전달되는 것은 함수 변수이므로 "외부 함수 반환 함수" 방법을 사용하여 이 매개 변수를 작성할 수 있습니다. 반환된 함수는 계산을 위해 "구체적으로 지정하려는" 매개변수를 전달할 수 있습니다. 예를 들어

// 规定利用哪个属性进行排序，如果不填则代表数组从大到小排序
function sortArgFuntion(compareProperty) { //compareProperty是上文中特定想要规定的参数

    return function (val1, val2) {
        if (compareProperty === undefined) {  // 如果排序的是数组的值，则用常规的方法
            if (val1 > val2) {
                return 1;
            } else if (val1 < val2) {
                return -1;
            } else {
                return 0;
            }
        } else {    // 如果排序的是对象的属性则用该方法
            if (val1[compareProperty] > val2[compareProperty]) {
                return 1;
            } else if (val1[compareProperty] < val2[compareProperty]) {
                return -1;
            } else {
                return 0;
            }
        }

    }
}
var data = [{
    name: 'andy',
    age: 25
}, {
    name: 'Nf',
    age: 29
}]
data.sort(sortArgFuntion('name'))

로그인 후 복사

sort 함수의 매개변수는 배열을 재정렬하는 데 사용되는 함수입니다. 그리고 함수 매개변수를 꺼낼 때 이 함수를 보다 직관적으로 작성하고 재사용성을 높여 원하는 효과를 얻을 수 있습니다. 동시에 함수 반환 함수의 본질과 고유성을 주의 깊게 연구하고 이해해야 합니다

4. 함수의 내부 속성

함수 내부에는 두 가지 특수 변수가 있습니다

arguments
this

인수

는 배열 유사 객체입니다. 배열 유사 객체란 무엇인가요? 배열 방식의 접근은 일련번호(예: obj[1])를 통해 수행할 수 있으며, 길이 속성이 있습니다(객체의 길이 속성을 정의하지 않으면 클래스 배열에만 있는 길이는 없습니다). 인덱스 값과 길이가 있고 배열의 다양한 메서드가 없기 때문에 배열처럼 배열 메서드를 호출하려면 Array.prototype.method.call을 사용하여 구현해야 합니다. Array.prototype.method.call 来实现

this

this是JavaScript非常容易混淆和复杂的一个知识点，他代表什么完全取决于调用位置，我会但列出一篇总结this。e.g:

window.color = 'red';
var o = {color:"blue"};
function sayColor() {
    console.log(this.color)
}
sayColor(); // red 因为调用位置是全局
o.sayColor = sayColor;
o.sayColor(); // blue 因为调用位置是o的对象里

로그인 후 복사

从上面例子中我们要知道，函数名字仅仅是一个指针，虽然执行环境不同，全局的sayColor()和函数中的o.sayColor()指向的都是同一个函数

caller

es5新加的，他返回当前函数(必须是函数，对象不行)的调用环境，如果调用环境是全局，则返回null。有两种用法，一种是函数名加caller，一种是arguments.callee.caller

    function outer() {
        console.log(outer.caller); //null
        inner();
    };
    function inner() {
        console.log(inner.caller); // outer里的代码
    }

로그인 후 복사

5、函数的属性和方法

因为函数也是对象，所以也有属性和方法；函数里面有length和prototype两个属性，length指传入形参的个数
function add(num1,num2) {} console.log(add.length) // 2

this

이것은 JavaScript에서 매우 혼란스럽고 복잡한 지식 포인트입니다. 전적으로 호출 위치에 따라 달라지는 것을 나열하지만 요약하겠습니다. 예:

    var color = "red";
    var o = {color:"blue"};
    function sayColor() {
        alert(this.color)
    }
    sayColor(); // red
    sayColor.call(this); // red 
    sayColor.call(window); // red
    sayColor.call(o); // blue

로그인 후 복사

위의 예에서 함수 이름은 단지 포인터일 뿐이라는 것을 알아야 합니다. 실행 환경은 다르지만 함수의 전역 sayColor()와 o.sayColor()는 동일한 함수를 가리킵니다.

caller

es5에 새로 추가되었으며, 현재 함수의 호출 환경을 반환합니다(객체가 아닌 함수여야 함). 호출 환경이 전역인 경우 null이 반환됩니다. 두 가지 사용법이 있습니다. 하나는 함수 이름과 호출자이고, 다른 하나는args.callee.caller

    var color = "red";
    var o = {color:"blue"};
    function sayColor() {
        alert(this.color)
    }
    o.sayColor = sayColor;
    o.sayColor(); //blue

로그인 후 복사

5입니다. 함수 속성 및 메서드

함수도 객체이기 때문에 내부에도 속성과 메서드가 있습니다. 함수에는 길이와 프로토타입이라는 두 가지 속성이 있습니다. 길이는 전달된 매개변수의 수를 나타냅니다.function add(num1,num2) {} console.log(add.length) // 2

propertype

참조 유형의 경우 propertytype은 모든 인스턴스 메소드가 저장되는 실제 장소입니다.

사용자 정의 참조 유형을 생성하고 상속을 구현할 때 해당 역할과 키(아직 이해되지 않은 핵심 사항, 특히 상속이라는 단어가 얼마나 많은지 :))

es5에서는 속성 유형이 열거 가능하지 않으므로 순회할 수 없습니다.
apply() 및 call()

두 개의 매개변수, 첫 번째 매개변수는 실행할 범위이고, 두 번째 매개변수 적용은 Array 또는 인수 객체에 전달된 것이며, 호출은 각 값에 전달되고, 나머지는 그들은 똑같았습니다. 다음은 적용 및 호출의 역할을 설명하는 예 중 하나입니다.

    var color = "red";
    var obj = {color:"blue"}
    function sayColor() {
        console.log(this.color);
    }
    var bindSayColor = sayColor.bind(obj);
    bindSayColor(); // blue

로그인 후 복사

호출을 사용하지 않는 경우 다음을 수행해야 합니다. rrreee

따라서 비교를 한눈에 볼 수 있습니다. 객체와 메소드의 분리를 달성하는 것입니다

bind 메소드

🎜bind 메소드는 함수의 인스턴스를 구성하는 데 사용되며, 이 객체는 바인드가 지정한 범위를 가리킵니다. 🎜🎜예:🎜rrreee🎜추천 관련 기사:🎜🎜🎜javascript function🎜🎜🎜🎜🎜Javascript 일반 함수와 생성자의 차이점🎜🎜🎜🎜🎜JavaScript의 함수 선언 및 호출에 대한 자세한 설명🎜🎜🎜 🎜

위 내용은 JavaScript 함수를 사용하는 방법 JavaScript 함수의 속성 및 메서드 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!