집 >웹 프론트엔드 >JS 튜토리얼 >js 프로토타입 객체 및 프로토타입 체인 분석 소개(코드 포함)

js 프로토타입 객체 및 프로토타입 체인 분석 소개(코드 포함)

不言원래의: 2018-08-15 15:51:521561검색

이 기사는 js 프로토타입 및 프로토타입 체인(코드 포함)에 대한 지식을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 생성자를 선언합니다

function People(name,age){
        this.name = name;
        this.age = age;
    }

생성자 프로토타입 객체에 클래스 메서드를 작성하면 하위 클래스는 더 이상 상위 클래스 생성자를 호출하여 메서드를 상속할 수 없습니다(속성은 계속 상속될 수 있습니다)

// 给People的原型添加方法
People.prototype.speak = function(){
        console.log("我是"+this.name);
    }
// 创建子类继承People
function Man(name,age,huzi){
        People.call(this,name,age);
        this.huzi = huzi;
    }

(사람과 사람의 두 속성과 메소드를 출력하고 호출하여 볼 수 있으며 테스트 코드는 코드에 표시되지 않습니다.)

이번에 Man이 People의 메소드를 상속받게 하는 방법은 무엇입니까?

Man.prototype = People.prototype;
    Man.prototype.smoke = function(){
        console.log("抽烟");
    }

단, 직접 지정할 수는 없습니다! 하위 클래스의 프로토타입을 상위 클래스 프로토타입으로 변경하면 두 생성자가 상위 클래스의 메서드와 하위 클래스의 객체에 액세스할 수 있는 프로토타입을 공유하게 됩니다. 올바른 상황은 하위 클래스가 액세스할 수 있어야 한다는 것입니다. 하지만 상위 클래스는 하위 클래스에 액세스할 수 없습니다. 메소드

js 객체의 프로토타입도 객체이므로 js 프로토타입에도 프로토타입이 있습니다.

객체의 메소드에 액세스할 때 존재하는 경우. 객체에서 직접 접근하고, 존재하지 않으면 객체의 프로토타입에서 찾아보고, 존재하지 않으면 프로토타입에서 찾아봅니다. 그렇지 않은 경우 객체 위치를 찾을 때까지 계속 온라인으로 검색하세요. 객체는 클래스(생성자)입니다. 이 클래스의 객체 프로토타입은 js 프로토타입과 다릅니다. 프로토타입으로 구성된 체인 구조를 js 프로토타입 체인이라고 합니다

하위 클래스가 상위 클래스의 메소드를 상속하려면 하위 클래스 생성자의 프로토타입 객체의 프로토타입(__proto__)을 상위 클래스의 프로토타입으로 설정해야 합니다. 클래스 생성자

그렇습니다 쓰기:

Man.prototype.__proto__ = People.prototype;

이렇게 작성해도 괜찮지만 공식적인 작성 방법이 더 나은 표준입니다(맞습니다)

// Object.create用于指定原型创建一个对象(空对象)
    Man.prototype = Object.create(People.prototype);
    Man.prototype.smoke = function(){
        console.log("抽烟");
    }

하위 클래스가 상위 클래스를 상속하고 새 메소드를 확장하는 경우 , 상위 클래스를 다시 작성할 수도 있습니다. 기존 메서드의 경우 하위 클래스 개체를 사용하여 재정의된 메서드를 호출하면 하위 클래스 자체 메서드가 실행됩니다.

Man.prototype.speak = function(){
        console.log("我是男性");
    }

js 프로토타입 객체 및 프로토타입 체인 분석 소개(코드 포함)

관련 기사