JavaScript 생성자에 대한 심층 토론

이 글의 내용은 자바스크립트 생성자에 대한 심도있는 논의입니다. 참고할만한 가치가 있으니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

오늘은 자바스크립트 생성자에 대해 논의하기로 약속이 있습니다. 예정대로 와주셔서 감사합니다

생성자 기능에 대해 어제와 며칠 전에 논의하고 결론을 내렸습니다. #🎜 🎜#

constructor는 기본적으로 이 프로토타입의 생성자를 가리키는 프로토타입 개체의 속성입니다. #🎜🎜 #
이 결론은 우리의 일상 업무에 거의 쓸모가 없는 것 같습니다. 그렇다면 생성자는 정말 쓸모가 없는 것일까요?

생성자를 사용하여 재사용 가능한 객체 생성

JS의 함수는 생성자이거나 일반 함수로 호출될 수 있습니다. 객체를 생성하기 위해 new를 사용할 때 해당 함수는 생성자입니다. 객체를 통해 호출되면 이는 일반적인 함수입니다.

우리는 일상 업무에서 객체를 생성해야 하는 경우가 종종 있는데, 대부분 객체 직접 수량을 사용하여 직접 생성합니다. #

var person = {
    name:'postbird',
    address:'earth',
    sayHello:function(){console.log('Hello,I am ' + this.name);}
};

단지 단일 개체인 경우 개체의 속성과 메서드는 기본적으로 변경되지 않습니다. 이는 전혀 문제가 되지 않지만 개체에 인스턴스가 많거나 상속 또는 생성자 매개 변수 전달이 포함된 경우 주의하세요. 코드 주석

//创建了一个构造函数
function Person(name,address){
    this.name = name;
    this.address = address;
}
//为构造函数的原型对象添加一个方法sayHello
Person.prototype.sayHello = function(){
    console.log('Hi I am ' + this.name);
}
//通过构造函数Person实例化一个p1，并传参
var p1 = new Person('postbird','earth');
//通过构造函数Person实例化一个p2，并传参
var p2 = new Person('ptbird','month');
console.log(p1);//{name: "postbird", address: "earth"}
console.log(p2);//{name: "ptbird", address: "month"}
// p1和p2 继承了Person的sayHello方法
p1.sayHello()//Hi I am ptbird
p2.sayHello()//Hi I am postbird

인내심을 갖고 위 코드를 맛보세요. 이렇게 하면 확장성이 더 좋아지고 N 인스턴스를 생성하고 코드 재사용을 달성할 수 있습니다

Classic Case# 🎜🎜 #

js의 생성자 생성자와 관련하여 매우 고전적인 데모가 있습니다

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor===Person) //true
console.log(Father.prototype.constructor===Person); //true
Father.prototype.constructor = Father;//修正
console.log(Father.prototype.constructor===Father); //true
var one = new father(25);
console.log(one.constructor===Father) // true

이 코드 줄에 주의하세요

Father.prototype.constructor = Father;//修正

왜 수정해야 합니까?

constructor는 기본적으로 이 프로토타입의 생성자를 가리키는 속성이 아닙니다.

?

이 코드 줄을 주석으로 처리하겠습니다.

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor===Person) //true
console.log(Father.prototype.constructor===Person); //true
//Father.prototype.constructor = Father;//修正
console.log(Father.prototype.constructor===Father); //false
var one = new Father(25);
console.log(one.constructor===Person) // true

#🎜🎜 # Smart as You, 나는 당신이 이미 문제를 파악했다고 믿습니다

Father.prototype = new Person('Beijin');

이 단계에서 프로토타입은 새 개체를 가리키고 이 새 개체의 생성자는 Person을 가리킵니다.

console.log((new Person('Beijin')).__proto__ === Person.prototype) //true

앞서 말했듯이 새 Person('Beijin') 객체에는 프로토타입이 없으며 프로토타입에는 기능만 있습니다. Father.prototype.constructor는 new Person('Beijin'의 프로토타입을 따릅니다. ) 체인은 생성자를 찾기 위해 내려갑니다. new Person('Beijin')에 생성자가 없으면 __proto__로 이동하여 생성자를 찾습니다. 왜냐하면 (new Person('Beijin'))._

때문입니다. proto_

=== Person.prototype 및 Person.prototype.constructor == function Person(), 따라서 Father.prototype.constructor == Person.prototype.constructor //function Person() var one = new Father일 때 (25), one.constructor = Father .prototype.constructor이므로 one.constructor는 Person() 함수를 가리키므로 수정해야 합니다. 그렇지 않으면 프로토타입 체인이 엉망이 됩니다

#🎜🎜 #

위 내용은 JavaScript 생성자에 대한 심층 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!