JavaScript 함수 호출
자바스크립트 함수를 호출하는 방법에는 4가지가 있습니다.
각각 다른 점은 이것의 초기화에 있습니다.
this 키워드
일반적으로 Javascript에서 this는 함수가 실행될 때 현재 개체를 가리킵니다.
 |
는 예약된 키워드이므로 this< 값을 수정할 수 없습니다. 🎜> . |
|---|
JavaScript 함수 호출
이전 장에서 함수를 만드는 방법을 배웠습니다.
함수 호출 후 함수 안의 코드가 실행됩니다. 온라인 인스턴스를 보려면 "인스턴스 실행" 버튼
myFunction()과 window.myFunction()은 동일합니다: Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>
全局函数 (myFunction) 返回参数参数相乘的结果：
</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2);
</script>
</body>
</html>인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요 | 이것은 일반적인 방법입니다 JavaScript 함수를 호출하는 것은 좋은 프로그래밍 습관이 아닙니다. 전역 변수, 메서드 또는 함수는 이름 지정 충돌 버그를 쉽게 일으킬 수 있습니다. |
|---|
this<🎜의 값 > 전역 개체가 됩니다. 웹 브라우저에서 전역 개체는 브라우저 창(창 개체)입니다. 이 인스턴스에서 반환된 값
| 这是调用 JavaScript 函数常用的方法， 但不是良好的编程习惯 全局变量，方法或函数容易造成命名冲突的bug。 |
|---|
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>全局函数 myFunction() 会自动成为 window 对象的方法。</p>
<p>myFunction() 类似于 window.myFunction()。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2);
</script>
</body>
</html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
| 함수는 전역 개체로 호출되며 이 의 값을 전역 개체로 만듭니다. 창 개체를 변수로 사용하면 프로그램이 쉽게 중단될 수 있습니다. |
|---|
메서드로서의 함수
JavaScript에서는 함수를 객체의 메서드로 정의할 수 있습니다.
다음 예에서는 두 개의 속성(firstName 및 lastName)과 하나의 메서드(< 🎜)가 있는 객체(myObject)를 생성합니다. >fullName):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>在 HTML 中 <b>this</b> 的值, 在全局函数是一个 window 对象。</p>
<p id="demo"></p>
<script>
function myFunction() {
return this;
}
document.getElementById("demo").innerHTML = myFunction();
</script>
</body>
</html>인스턴스 실행»"인스턴스 실행" 버튼을 클릭하여 view Online 인스턴스
fullName 메소드는 함수입니다. 함수는 객체에 속합니다. myObject는 함수의 소유자입니다.
이 객체에는 JavaScript 코드가 들어 있습니다. 인스턴스의 this 값은 myObject 개체입니다.
아래에서 테스트해보세요!fullName 메소드를 수정하고 this 값을 반환합니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>myObject.fullName() 返回 John Doe:</p>
<p id="demo"></p>
<script>
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>인스턴스 실행 »온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
| < img src="https://img.php.cn/upload/course/000/000/009/580430d9613d6751.jpg" alt="Note"/> | 함수는 객체 메소드로 호출되어 this
|
|---|
생성자를 사용하여 함수 호출
함수 앞에 new 키워드를 사용한 경우 호출하면 생성자가 호출됩니다.
새 함수가 생성된 것처럼 보이지만 실제로는 JavaScript 함수가 객체를 다시 생성한 것입니다.
Instances
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>在一个对象方法中 ，<b>this</b> 的值是对象本身。</p>
<p id="demo"></p>
<script>
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
생성자를 호출하면 새 개체가 생성됩니다. 새 객체는 생성자의 속성과 메서드를 상속합니다.
| 생성자의
|
|---|
함수 메소드로 함수 호출
JavaScript에서 함수는 객체입니다. JavaScript 함수에는 속성과 메서드가 있습니다.
call() 및 apply()는 사전 정의된 함수 메서드입니다. 두 가지 메서드를 사용하여 함수를 호출할 수 있으며, 두 메서드 모두의 첫 번째 매개 변수는 개체 자체여야 합니다.
인스턴스
return a * b;
}
myFunction.call(myObject, 10, 2); // 20개 반환
instance
return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray); // 20을 반환
두 메서드 모두 사용 개체 자체가 첫 번째 매개변수로 전달됩니다. 두 매개변수의 차이점은 두 번째 매개변수입니다. Apply가 전달하는 것은 매개변수 배열입니다. 즉, 여러 매개변수를 하나의 배열로 결합하여 전달하는 반면, call은 호출의 매개변수(두 번째 매개변수부터 시작)로 전달됩니다.
JavaScript 엄격 모드에서는 매개변수가 객체가 아니더라도 함수 호출 시 첫 번째 매개변수가 this의 값이 됩니다.
JavaScript 비엄격 모드에서는 첫 번째 매개변수의 값이 null이거나 정의되지 않은 경우 전역 개체를 대신 사용합니다.
| call() 또는 apply() 메소드를 통해
의 값을 설정할 수 있으며, 이미 개체에 대한 새 메서드 호출이 존재합니다. |
|---|
<🎜>
