JavaScript 객체 연구 노트

객체는 JavaScript의 기본 단위이며 실제로는 모든 것이 객체이며 그 기능은 매우 강력합니다. 독특한 스타일을 가지고 있을 뿐만 아니라 독특한 기능도 가지고 있습니다.

1. 참조

참조의 개념은 객체의 실제 위치를 가리키는 포인터입니다. 아래 예를 참조하세요.

var items = new Array("abc","def","hig");
//创建此数组的引用
var Ref = items;
items.push("klm");
alert(Ref.lenth);  //此处应该显示4

그러나 문자열인 경우 다른 상황이 발생합니다. 아래 코드를 참조하세요.

var items = "abc";
var Ref = items;
items += "def";  //这里创建了一个新对象，而非原对象的修改。

이제 Ref와 항목이 다른 지점을 가리킵니다. . 물체.

2. 함수 오버로딩

JS의 각 함수에는 모든 매개변수를 받는 의사 배열인 가변 인수가 있습니다. 수정할 수 없지만 길이 속성이 있기 때문에 "유사"인 이유입니다. 다음 예를 살펴보겠습니다.

function  myFun(num1,num2)
{
    if(arguments.length == 2) { alert("我有两个参数"); }
    if(arguments.length == 1) { alert("我有一个参数"); }
}

다음으로 myFun("abc"); myFun("abc","def"); 함수를 호출하고 차이점이 무엇인지 살펴보겠습니다. 이건 원래 함수 오버로딩입니다 :)

3. 범위

자바스크립트에서는 범위가 블록(while, if, for)이 아닌 함수별로 구분됩니다. 이로 인해 일부 코드를 이해하는 데 문제가 발생할 수 있습니다. 자세한 내용을 설명하기 위해 다음 예를 살펴보겠습니다.

var temp="oldTemp"    //全局变量
if(true)
{
    var temp = "newTemp"   //这里还在全局中
}
alert(temp == "newTemp")   //发现相等

하지만 함수에서 임시 변수를 선언하고 변경하면 효과가 완전히 달라집니다. 예를 참조하세요.

var temp="oldTemp" ;   //全局变量
function test()
{
    var temp = "newTemp";
}
test();
alert(temp == "newTemp") ;  //发现不相等

JS에서 전역 변수는 window 객체의 속성입니다. 위의 예에서 전역 변수 temp == window.temp 또한 특정 변수에 선언이 없으면 자동으로 선언이 됩니다. 전역 변수이지만 특정 함수 내에서만 사용되는 경우가 많습니다.

4. 클로저

클로저는 외부 함수가 종료되더라도 내부 함수가 주변 함수의 변수를 참조할 수 있다는 의미입니다. 아래 예를 참조하세요.

function AddNum(num1)
{
    return function (num2)
    {
        return num1 + num2;
    }
}
var temp = AddNum(4);          //传入第一个参数，然后AddNum消失
var temp2 = temp(5);           //传入第二个参数，然后相加，返回9
alert(temp2);

이 예는 클로저의 개념을 매우 잘 구현하고 있으며 특별한 경우이므로 확실히 이런 방식으로 사용되지는 않습니다.

5. 컨텍스트 객체

컨텍스트 객체는 항상 현재 코드가 위치한 객체를 가리키는 변수를 통해 반영됩니다. 아래 코드를 보세요:

var obj ={
    yes:function(){
        this.val = true;
    },
    no:function(){
        this.val = false;
    }
}
alert(obj.val == null);   //这里我们发现对象obj没有val属性
obj.yes();                     //执行yes函数，obj有了val属性
alert(obj.val == true);
 
window.no = obj.no     //把obj的no函数传给window对象
window.no();
alert(obj.val == true) ;  //发现没有变化
alert(window.val == false)   //window里的val变为false;

여기에서는 이해하기 쉽지 않습니다. 다행히 JS에서는 호출 메서드를 제공합니다. 아래 예를 참조하세요.

function changeColor(color)
{
    this.style.color = color;
}
changeColor("Red");    //这里不行，因为window对象没有style属性
var temp = document.getElementById("temp");
changeColor.call(temp,"White");  //这里注意call的用法

호출 메서드는 컨텍스트 개체를 첫 번째 매개변수로 설정하고 다른 매개변수를 원래 함수의 매개변수로 설정합니다.

6. 객체

이제 막 주제에 들어섰지만 이전 개념으로는 실제로 이 작품에는 많은 내용이 없습니다. 예제를 직접 살펴보겠습니다.

var obj = new Object();    //创建一个对象obj
obj.val = 5;               //创建属性obj，并为其赋值
obj.click = function()     //创建函数
{
    alert("我被单击了");
}

위 코드는 다음 코드와 동일합니다.

var obj = {
    val : 5,
    click: function(){
        alert("我被单击了");
    }
}

다른 객체지향 언어와 달리 JS에는 클래스 개념이 없습니다. 언어에서는 기본적으로 특정 클래스의 인스턴스를 인스턴스화해야 하지만 JS에서는 접근 방식이 다릅니다. 모든 함수를 객체로 인스턴스화할 수 있습니다. 먼저 간단한 개체를 만듭니다.

function User(name)
{
    this.name = name;
}
var temp = new User("张三");
alert(temp.name);

위 개체 User가 함수로만 사용된다면 어떨까요?

User("只作为函数使用");
alert(window.name);

이 컨텍스트는 window 객체가 됩니다.

7. 객체 메서드

공용 메서드는 객체의 컨텍스트에서 최종 사용자가 액세스할 수 있습니다. 여기서 우리는 프로토타입 속성을 이해해야 합니다. 아래 코드를 참조하세요.

function User(name,age)
{
    this.name = name;
    this.age = age;
}
User.prototype.getName = function(){ return this.name};
var user = new User("张三",25);
alert(user.getName());

공용 메서드를 동적으로 생성할 수도 있습니다. 아래 코드를 참조하세요.

function User(name,age)
{
    this.name = name;
    this.age = age;
    this.getName = function(){ return this.name};
}
 
var user = new User("张三",25);
alert(user.getName());

동적으로 생성된 메서드는 코드가 처음 컴파일될 때 생성되지 않습니다. 이 기술은 프로토타입을 더 비싸게 만드는 데 사용되지만 더 강력하고 유연합니다.

위 내용은 자바스크립트 객체 학습노트 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!