집 > 기사 > 웹 프론트엔드 > 세 가지 JavaScript 시뮬레이션 구현 캡슐화 방법과 작성 방법의 차이점 공유

세 가지 JavaScript 시뮬레이션 구현 캡슐화 방법과 작성 방법의 차이점 공유

小云云원래의: 2018-01-20 13:43:281527검색

상속은 하위 클래스를 사용하여 다른 상위 클래스를 상속하는 것입니다. 그러면 하위 클래스가 상위 클래스의 모든 속성과 메서드를 자동으로 갖게 됩니다. 이 프로세스를 상속이라고 합니다. JS에서 상속을 구현하는 방법은 여러 가지가 있습니다. 오늘은 그 중 세 가지를 소개하겠습니다. 이 글을 통해 js 시뮬레이션을 통한 세 가지 캡슐화 방법에 대해 알아봅시다. 필요한 친구들이 참고하면 도움이 될 것입니다.

1. Object 클래스에 확장 메소드 추가

//声明一个父类
function Person(name){
 this.name=name;
 this.age=age;
 this.say=function(){
   alert("我叫"+this.name);
 }
}
//声明一个子类 
function Student(){
 this.no=no;
 this.study=function(){
  alert("我在学习！");
 }
}
// 通过循坏，将父类对象的所有属性和方法，全部赋给子类对象
Object.prototype.extend=function(parent){
 for(var i in parent){
   this[i].parent[i];
 }
}
var p=new Person("张三",12);
var s=new Student("1234567");
//子类对象调用这个扩展方法
s.extend()
console.log(s);

위에서 언급한 상속 원칙:

루핑을 통해 상위 클래스 객체의 모든 속성과 메소드를 하위 클래스 객체에 할당합니다. 핵심은 for-in 루프이다. Object를 확장하지 않고도 간단한 루프를 통해 연산을 구현할 수 있다.

하지만 이 방법을 사용하여 상속을 구현하는 데에는 몇 가지 단점이 있습니다.

①한 번의 인스턴스화를 통해 완전한 하위 클래스 개체를 직접 가져올 수 없습니다. 먼저 상위 클래스 개체와 하위 클래스 개체를 가져온 다음 수동으로 병합해야 합니다.

②Object 확장의 상속 방법도 하위 클래스의 개체에 유지됩니다.

두 번째 상속 구현 방법을 살펴보겠습니다~

2. 프로토타입 상속 사용

이 방법을 소개하기 전에 프로토타입 객체와 프로토타입이라는 두 가지 개념에 대해 이야기해 보겠습니다.

1. 프로토타입: 함수의 프로토타입 객체

①함수에만 프로토타입이 있고, 모든 함수에는 프로토타입이 있어야 합니다

②프로토타입 자체도 객체입니다!

③프로토타입은 현재 함수의 참조 주소를 가리킵니다!

2. __proto__: 객체의 프로토타입!

①오브젝트만 __proto__를 갖고, 모든 객체에는 반드시 __proto__가 있어야 합니다

②__proto__도 객체이므로 자체적인 __proto__도 가지고 있습니다. 이 선을 따라 조회하는 순서가 프로토타입 체인입니다.

3 함수와 배열은 둘 다 객체이며 자체 __proto__

//声明父类
function Person(name,age){
   this.name=name;
   this.age=age;
   this.say=function(){
    alert("我叫"+this.name);
   }
}
//声明子类   
function Student(no){
   this.no=no;
   this.study=function(){
    alert("我在学习！我叫"+this.name+"今年"+this.age");
   }
}
//将父类对象赋给子类的prototype  
Student.prototype=new Person("张三",14);
//拿到子类对象时，就会将父类对象的所有属性和方法，添加到__proto__
var s=new Student(); 
s.study();

프로토타입 상속 원칙을 사용합니다.

상위 클래스 객체를 하위 클래스의 프로토타입에 할당하면 상위 클래스 객체의 속성과 메서드가 서브클래스의 프로토타입에 나타납니다. 그러면 하위 클래스를 인스턴스화할 때 하위 클래스의 프로토타입은 하위 클래스 객체의 __proto__에 있게 됩니다. 마지막으로 상위 클래스 객체의 속성과 메서드는 하위 클래스 객체의 __proto__에 나타납니다.

이러한 상속의 특징:

①하위 클래스 자체의 모든 속성은 멤버 속성이고 상위 클래스에서 상속된 속성은 프로토타입 속성입니다.

② 여전히 1단계 인스턴스화를 통해 완성된 하위 클래스 개체를 가져올 수 없습니다.

상속을 구현하는 세 번째 방법:

call(), Apply(), Bind() 이 세 가지 방법은 매우 유사하며 매개변수 전달만 다릅니다.

function Person(name,age){
  this.name=name;
  this.age=age;
  this.say=function(){
    alert("我叫"+this.name);
    }
}
function Student(no,name,age){
  this.no=no;
  this.study=function(){
    alert("我在学习！");
  }
//将父类函数的this,指向为子类函数的this
Person.call(this,name,age);
}
var s=new Student(12,"张三",24);
console.log(s);

세 가지 함수의 유일한 차이점은 func의 매개변수 목록을 받아들이는 방식뿐입니다. 그 외에는 기능상의 차이가 없습니다!

세 가지 함수의 작성 방법(차이):

호출 작성 방법: func.call(func의 this가 가리키는 obj, func 매개변수 1, func 매개변수 2,...)

적용 작성 방법: func .apply(func 매개변수 1, func 매개변수 2,...]);

bind 작성 방법: func.bind (func 매개변수 1, func 매개변수로 가리키는 obj); 2,...) ;

세 가지 JavaScript 시뮬레이션 구현 캡슐화 방법과 작성 방법의 차이점 공유

관련 기사