자바스크립트 프로토타입이란 무엇입니까? 자바스크립트 프로토타입에 대한 자세한 설명

이 글의 내용은 자바스크립트 프로토타입이 무엇인지에 관한 것입니다. JavaScript 프로토타입에 대한 자세한 설명은 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

프로토타입

프로토타입은 꽤 중요합니다. 프로토타입이라고 하면 프로토타입이란 무엇인가요?

생성자가 생성되면 프로토타입 속성이 있습니다. 이 속성은 기본적으로 객체를 생성하고 연결합니다. 이 객체는 기본적으로 빈 객체입니다. a의 목적은 특정 유형의 모든 인스턴스에서 공유할 수 있는 속성과 메서드를 포함하는 것입니다.
직접 말하면 생성자의 프로토타입 속성을 호출하여 프로토타입을 가리킬 수 있으며 이를 통해 해당 객체 인스턴스의 프로토타입 객체를 생성할 수 있습니다.

프로토타입을 사용하면 어떤 이점이 있나요?

프로토타입을 사용하면 모든 개체 인스턴스가 포함된 속성과 메서드를 공유할 수 있다는 장점이 있습니다.

어지러우신가요? 정말 지저분하지 않나요? 생성자, 프로토타입, 인스턴스까지 걱정하지 마세요. 한 문장으로 알려드리겠습니다
모든 생성자는 결국 이해를 돕기 위해 인스턴스로 진화해야 합니다. 왜냐하면 생성자에 정의된 메서드는 모든 인스턴스에서 공유될 수 없기 때문입니다. 이므로 프로토타입인 생성자의 상위 수준만 찾을 수 있으며 프로토타입에 정의된 속성과 메서드는 모든 인스턴스에서 공유될 수 있습니다. 아시죠. 셋이 삼각관계네요

쉽죠? Constructor.prototype = 프로토타입Prototype.constructor = constructorInstance object.constructor = constructor (인스턴스 객체는 불가능하기 때문입니다) 자체 생성자 속성에서 찾은 다음 __proto__를 통해 프로토타입에서 찾고 프로토타입 브리지를 통해 생성자를 가리킵니다.)
Instance object.__proto__ = 프로토타입

프로토타입은 인쇄 및 표시할 수 없으며 통해서만 찾을 수 있습니다.
constructor.prototype
표시

다음은 프로토타입을 얻기 위한 두 가지 다른 방법입니다

isPrototypeOf() 메서드

: 이 인스턴스의 포인터가 이 프로토타입을 가리키는지 여부를 결정하는 데 사용됩니다.

Object.getPrototypeOf() 메소드: 인스턴스의 프로토타입을 가져옵니다. 이 메소드에서 지원되는 브라우저는 IE9+, Firefox 3.5+, Safari 5+, Opera 12+ 및 Chrome이므로 인스턴스의 프로토타입을 가져오는 것이 좋습니다. 이 방법을 통해 객체를 생성합니다.

假定有个Person构造函数和person对象
Person.prototype.isPrototypeof(person)  // 返回true说明前者是person1的原型
Object.getPrototypeOf(person) === Person.prototype // 获取person的原型

프로토타입에 저장된 속성과 메서드를 공유하는 여러 객체 인스턴스의 기본 원칙코드가 객체의 속성을 읽을 때마다 지정된 이름을 가진 속성을 대상으로 검색이 수행됩니다. 객체 인스턴스 자체부터 시작하십시오. 주어진 이름을 가진 속성이 인스턴스에서 발견되면 속성의 값이 반환되고, 발견되지 않으면 포인터가 가리키는 프로토타입 객체를 검색하고 프로토타입 객체에서 주어진 이름을 가진 속성을 검색합니다. 이 속성이 프로토타입 객체에 있으면 속성 값이 반환됩니다.

프로토타입의 값에 액세스할 수 있지만 인스턴스에 속성을 추가하고 속성 이름이 프로토타입과 동일한 경우 이 속성은 프로토타입의 값을 차단(덮어쓰기)합니다. 해당 속성의 프로토타입에 있는 값입니다.

function Person() {}

Person.prototype.name = "George"
Person.prototype.sayName = function() {
    console.log(this.name)
}

let person1 = new Person();
let person2 = new Person();
person1.name = "命名最头痛";

// 在这一环节，person1.name会从他实例中找，若实例没找到，则继续搜索它的原型对象
console.log(person1.name); // 命名最头痛 
console.log(person2.name); // George

인스턴스 객체에 속성을 추가하면 프로토타입의 해당 속성에 액세스하는 것만 방지될 뿐 해당 속성은 수정되지 않습니다. 이 속성을 null로 설정해도 인스턴스에만 이 속성이 설정되고 프로토타입에 대한 연결이 복원되지 않습니다

.

인스턴스 속성을 완전히 삭제하려면 삭제 연산자를 사용하면 프로토타입의 속성에 다시 액세스할 수 있습니다. 삭제 연산자

依旧用上面那个例子
delete操作符可用于删除对象的属性，无论是实例上的属性，还是在原型上的属性都可以删

delete person1.name    // 删除这个实例的属性
delete Person.prototype.name    // 删除原型上的属性
delete Person.prototype.constructor // 删除constructor属性，这样就没办法指回函数了

hasOwnProperty() 메서드 사용을 사용하면 인스턴스 또는 프로토타입에 속성이 존재하는지 감지할 수 있습니다. 이 메소드는 해당 속성이 객체 인스턴스에 존재하는 경우에만 true를 반환합니다. 또한 해당 속성이 객체 자체의 속성인지 확인하는 데 hasOwnProperty 메소드가 사용되는 것으로 이해할 수도 있습니다.

obj.hasOwnProperty('속성 이름')

Demo:

function Person(){ 
  this.name = '命名最头痛'
}
var person = new Person()
Person.prototype.age = '18'
console.log(person.hasOwnProperty('name'))  // true
console.log(Person.prototype.hasOwnProperty('age')) // true

in 연산자

in 연산자에는 두 가지 용도가 있습니다

① for-in 루프에서 사용되는 for-in은 액세스할 수 있고 열거 가능한 모든 객체를 반환할 수 있습니다( 열거 가능) 속성(열거 가능한 속성을 한눈에 볼 수 있음)

위 내용은 자바스크립트 프로토타입이란 무엇입니까? 자바스크립트 프로토타입에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!