JavaScript 객체 지향 15분 튜토리얼

이 가이드는 여러분이 아름다운 객체 지향 JavaScript 코드를 즉시 작성하는 방법을 배우는 데 도움이 될 것이라고 약속합니다! 간결한 JavaScript 코드 작성 방법을 배우는 것은 개발자 개발에 매우 ​​중요합니다. Node.js와 같은 기술의 출현으로 이제 JavaScript를 사용하여 MongoDB와 같은 영구 데이터베이스를 쿼리할 수도 있습니다. 데이터 저장.
이제 객체지향 JS(OO JS) 작성을 시작하세요. 질문이 있거나 놓친 부분이 있으면 아래 댓글로 알려주세요.
리터럴 표기법
리터럴 표기법은 JavaScript에서 객체를 생성하는 한 가지 방법일 뿐이며, 그렇습니다. 여러 가지 방법이 있습니다. 리터럴 표기법은 객체 인스턴스를 생성할 때 선호되는 방법입니다.
var bill = {};
위 코드는 그다지 유용하지 않으며 단지 빈 객체를 생성할 뿐입니다. 이 개체에 일부 속성과 메서드를 동적으로 추가해 보겠습니다.
bill.name = "Bill E Goat";
bill.sound = function() {
console.log( 'bahhh!' );
};
여기에 " 이름을 추가했습니다. " 속성을 지정하고 "Bill E Goat" 값을 할당했습니다. 이전에 빈 개체를 만들 필요가 없으며 위의 모든 작업을 단 한 단계로 수행할 수 있습니다.
var bill = {
name: "Bill E Goat",
sound: function() {
console.log( 'bahhh!' );
}
};
정말 심플하고 아름답죠? 속성과 메서드에 액세스하는 것도 간단합니다.
bill.name; // "Bill E Goat"
bill.sound(); // "bahhh"
속성 이름이 유효한 식별자가 아닌 경우에도 다음과 같이 액세스할 수 있습니다.
bill['name']; // "Bill E Goat"
메서드를 호출할 때 메서드 이름 뒤에 괄호 쌍을 추가해야 한다는 점에 유의하세요. 현재 사운드 메서드를 재정의하고 매개변수를 전달하여 호출해 보겠습니다.
bill.sound = function(noise) {
console.log(noise);
};
bill. brrr!"); // "brrr!" 그는 추워요
좋습니다. 매개변수(노이즈)를 전달하고 메소드 내에서 액세스했습니다. 다음으로 name 속성에 액세스하기 위한 메서드를 계속 추가합니다:
bill.sayName = function() {
console.log( "Hello " + this.name );
};
bill. sayName( ); // "Hello Bill E Goat"
this.propertyName
bill.sayName; // function
sound라는 로컬 메서드를 객체에 할당합니다. 이제 sound 뒤에 괄호를 추가하고 매개변수를 전달하여 해당 메서드를 호출할 수 있습니다. Bill을 복제하려고 하면 어떻게 될까요?
var sally = bill;
sally.name; // "Bill E Goat", 하지만 그녀의 이름은 Sally입니다.
sally.name = "Sally";
sally.name; Sally", Better
bill.name; // "Sally", 아, Bill에게 무슨 일이 일어난 걸까요
위의 예에서는 새 변수 sally를 생성하여 bill과 동일하게 만들었습니다. 이제 sally와 bill은 메모리에서 동일한 객체를 참조합니다. 한 개체를 변경하면 다른 개체에도 영향을 미칩니다.
다른 예를 살펴보겠습니다.
bill.name = "Bill E Goat";
bill.sayName(); // "Hello Bill E Goat";
var sayName = bill.sayName ;
sayName; // 함수, 지금까지는 괜찮습니다
sayName(); // "Hello", 응 왜 Bills 이름이 출력되지 않았나요?
bill의 이름 속성은 로컬 변수입니다. sayName 메소드는 전역 범위에서 생성되므로 this.name은 전역 범위에서 name 값을 찾습니다. 하지만 문제는 이름이 정의되지 않았다는 것입니다. 전역 변수 이름을 정의하고 어떤 일이 일어나는지 살펴보겠습니다.
var name = "Bearded Octo";
sayName(); // "Hello Bearded Octo"
여기서 전역 변수 이름을 만들고 값은 "Bearded Octo"입니다. sayName 메소드를 호출하면 전역 범위에서 이름을 조회하고 "Bearded Octo" 값에 액세스합니다. 좋습니다. 생성자 표기법을 살펴보겠습니다.
생성자 표기법
생성자 표기법은 객체 지향 JavaScript를 작성하는 또 다른 방법입니다. 객체에 대한 초기 속성 값과 메소드를 설정해야 하거나 객체의 다른 인스턴스를 생성하려는 경우 속성과 메소드가 다른 경우 생성자 표기법이 선호됩니다. 빈 개체를 만드는 것부터 시작해 보겠습니다.
function Game() {}
클래스임을 나타내기 위해 첫 글자를 대문자로 표시하는 것이 관례입니다. 이 클래스를 사용하여 새 객체를 생성해 보겠습니다.
var zelda = new Game();
var smb = new Game();
zelda.title = "Legend of Zelda";
smb. title = "Super Mario Brothers";
zelda.title; // "Legend of Zelda"
smb.title; // "Super Mario Brothers"
이제 개체에 고유한 속성이 있습니다! 객체를 생성할 때 값을 속성에 전달하거나 나중에 수정할 수 있습니다.
function Game(title) {
this.title = typeof title !== 'undefine' ? title : "";
};
var zelda = new Game("Legend of Zelda");
zelda.title; // "젤다의 전설"
zelda.title = "시간의 오카리나";
zelda.title; // "시간의 오카리나"
var 공백 = new Game();
blank.title; // ""
두 번째 줄은 조금 이해하기 어려울 수 있습니다. 우리는 if else 블록을 한 줄에 맞추는 방법인 삼항 연산자를 사용하고 있습니다. 이는 다음과 동일합니다:
if (typeof title !== 'undefine') {
this.title = title;
} else {
this.title = "";
}
// 동일합니다
this.title = typeof title !== 'undefine' ? title : "";
이 객체가 생성될 때 title 매개변수가 전달되면 title 속성이 개체가 설정됩니다. 전달되지 않으면 기본값 ""으로 설정됩니다.
이 속성에 액세스하는 메서드를 만들 수 있습니다.
zelda.loveTitle = function() {
console.log( "I love " + this.title );
};
zelda .loveTitle(); // "나는 시간의 오카리나를 좋아합니다."
멋져 보이지만 더 좋을 수도 있습니다. Game 클래스에서 생성된 모든 개체가 다음 메서드를 갖도록 Game 클래스에 메서드를 추가할 수 있습니다.
Game.prototype.heartIt = function() {
console.log( "I heart " + this.title ) ;
};
zelda.heartIt(); // "시간의 오카리나 좋아요"
smb.heartIt() // "슈퍼마리오 브라더스
에필로그
희망 이 튜토리얼은 객체지향 JavaScript를 배우는 데 유용합니다. 객체지향 JavaScript에는 여러 측면이 있으며, 이는 향후 튜토리얼에서 소개될 것입니다