javascript_javascript 기술로 객체를 생성하는 여러 방법 요약

머리말:

웹 2.0(가장 대표적인 것이 Ajax 기술)의 등장으로 프로그래머의 눈에 JavaScript는 더 이상 '장난감 언어'가 아닙니다. 프로그래밍은 지속적으로 단순화되고 있지만 "사용자 경험, 성능, 호환성, 확장성..."에 대한 요구 사항은 지속적으로 개선되고 있으며 Prototype, jQuery, ExtJs, Dojo와 같은 우수한 프레임워크(클래스 라이브러리)가 등장하여 크게 단순화되었습니다. 웹 개발.

자바스크립트를 깊이 있게 공부하고 사용하는 사람들이 늘어나고 있습니다. 물론 기업에서는 개발자에 대한 요구 사항이 점점 더 높아지고 있습니다. 제 경험을 예로 들어보겠습니다. 2000년대 초반에 저는 JavaScript를 사용하여 일부 페이지 UI 효과를 작성하고 웹사이트 양식 확인 및 기타 작업을 수행할 수 있었습니다. 그 당시에는 꽤 멋지다고 생각했습니다. 하지만 이제 XMLHttpRequest와 JSON이 무엇인지도 모르고 JavaScript의 객체지향/객체 기반 프로그래밍도 이해하지 못한다면 여전히 자신을 훌륭한 웹 프로그래머라고 부를 수 있습니까? (최첨단 기술에 관심이 있는 친구라면 JavaScript와 떼려야 뗄 수 없는 node.js와 MongoDB를 알아야 합니다.)

JavaScript의 유연성은 사람들이 좋아하기도 하고 싫어하기도 하는 부분입니다. 일반적으로 시작하기는 쉽지만 마스터하기는 어렵습니다. 자바스크립트 OOP/객체 기반 프로그래밍을 이해하는 것은 프로그래머의 자바스크립트 수준을 판단하는 분수령입니다. 자바스크립트 객체 기반 프로그래밍에서 가장 기본적인 것은 '객체 생성'인데, 이는 다른 언어 지향 언어(Java, C#, C)에 익숙한 많은 프로그래머들이 혼란스럽거나 적응하기 어렵다고 느끼는 경우가 많습니다. 따라서 이 기사에서는 먼저 JavaScript에서 객체를 생성하는 몇 가지 일반적인 방법을 소개합니다.

1. 간단한 객체 생성 객체 리터럴 {}을 사용하여 객체 생성(가장 간단하고 이해하기 쉬우며 권장)

코드 복사 코드는 다음과 같습니다.

var Cat = {};//JSON
Cat.name="kity"; //속성 추가 및 값 할당 ​​
Cat.age=2;
Cat.sayHello=function(){
Alert("hello " Cat.name ", 올해 " Cat["age" ] " is old ");//"."를 사용하여 속성에 액세스하거나 HashMap을 사용하여
}
Cat.sayHello()에 액세스할 수 있습니다.//객체의 (메서드) 함수 호출

2. 함수를 사용하여 클래스 시뮬레이션(인수 없는 생성자)

2.1 클래스의 새 인스턴스에 해당하는 객체 생성

코드 복사 코드는 다음과 같습니다.

함수 Person(){

}
var personOne=new Person();//함수를 정의합니다. "인스턴스화"하는 new 키워드가 있으면 해당 함수는 클래스로 간주될 수 있습니다
personOne.name="dylan ";
personOne.hobby="coding";
personOne.work=function(){
alert(personOne.name "은 지금 코딩 중입니다...");
}

personOne.work();

2.2 매개변수화된 생성자를 사용하여 구현할 수 있으므로 정의가 더욱 편리하고 확장 가능합니다(권장)

코드 복사 코드는 다음과 같습니다.

function Pet(이름,나이,취미){
this . name=name;//이 범위: 현재 개체
this.age=age;
this.hobby=hobby;
this.eat=function(){
Alert("내 이름은 입니다. " this.name ", 저는 " this.hobby "를 좋아하고 저는 미식가이기도 합니다");
}
}
var Maidou =new Pet("McDull",5,"sleeping") ;//예제 객체 변형/생성

maidou.eat();//eat 메소드 호출(함수)

3. 팩토리 메소드를 사용하여 생성(객체 키워드)

코드 복사 코드는 다음과 같습니다.

var wcDog =new Object();
wcDog .name="Wangcai";
wcDog.age=3;
wcDog.work=function(){
Alert("나는 " wcDog.name "입니다, 으윽... ... ");
}

wcDog.work();

4. 프로토타입 객체 사용법 프로토타입 키워드

코드 복사 코드는 다음과 같습니다.

function Dog(){

}
Dog.prototype.name =" Wangcai";
Dog.prototype.eat=function(){
Alert(this.name "식도락가입니다");
}
var wangcai =new Dog();
왕카이 .eat();

5. 혼합 모드(프로토타입 및 생성자)

코드 복사 코드는 다음과 같습니다:

function Car(name,price){
this.name=name;
this.price=price;
}
Car. 프로토타입.sell=function(){
Alert("나는 " this.name "입니다. " this.price "10,000위안")을 판매합니다
}

var camry =new Car("Camry",27);
camry.sell();

6. 동적 프로토타입 방법(다음과 같이 간주할 수 있음) 혼합모드의 특수한 경우입니다)

코드 복사 코드는 다음과 같습니다

function Car(이름, 가격){
this.name=name;
this.price=price
if(typeof Car.sell=="undefine"){
Car.prototype .sell=function(){
Alert("나는 " this.name "이고 " this.price "10,000위안"을 판매하고 있습니다.");
}
Car.sell= 사실;
}
}

var camry =new Car("Camry",27);
camry.sell();

위는 JavaScript에서 객체를 생성하는 데 가장 일반적으로 사용되는 방법입니다. 초보자들은 그것을 보고 기절하거나 심지어 걱정할 수도 있습니다. 사실, 전혀 걱정할 필요가 없습니다. 이 방법 중 한두 가지만 익히고 나머지 방법만 이해하면 됩니다. 이것이 바로 JavaScript의 유연성입니다. 각 방법에는 장단점이 있으므로 정해진 권장 사항은 없습니다. 이해하고 숙달하기 가장 쉬운 방법을 선택하세요. 게다가 사람마다 코딩 스타일이 다를 수 있습니다. 앞으로는 jQuery의 소스 코드를 연구하거나, 다른 플러그인을 참조하여 다시 작성하거나, 자신만의 플러그인을 개발해야 할 수도 있습니다. 다른 사람의 코딩 스타일도 이해해야 합니다. 이러한 클래스 라이브러리와 플러그인은 모두 객체 지향/객체 기반을 기반으로 합니다.