캡슐화를 달성하기 위한 세 가지 JavaScript 시뮬레이션 방법과 그 차이점 소개

머리말

상속은 하위 클래스를 사용하여 다른 상위 클래스를 상속하는 것입니다. 그러면 하위 클래스가 자동으로 상위 클래스의 모든 속성 및 메서드를 갖게 됩니다. 이 프로세스를 상속이라고 합니다. 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. 프로토타입 상속 사용

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

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

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

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

2,

proto

: 물체의 프로토타입! ①객체에만 proto가 있고 모든 객체에는 proto가 있어야 합니다

②proto도 객체이므로 자체 proto도 있습니다. 이 선을 따라 찾는 순서가 프로토타입 체인입니다.

3함수와 배열은 객체이며 자체 프로토타입을 갖습니다.

//声明父类
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();

프로토타입 상속 원칙 사용:

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

이러한 상속의 특징:

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

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

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

call(), apply() 및 바인딩(), 이 세 가지 방법은 매우 유사하며 매개변수 전달만 다릅니다.

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, func 매개변수 1, func 매개변수 2,...이 가리키는 obj); 쓰기 방법 적용: func .apply(func의 this가 가리키는 obj, [func 매개변수 1, func 매개변수 2,...])

bind 쓰기 방법: func.bind(func의 this가 가리키는 obj) ( func 매개변수 1, func 매개변수 2, ...);

요약

위 내용은 캡슐화를 달성하기 위한 세 가지 JavaScript 시뮬레이션 방법과 그 차이점 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!