중요한 JavaScript 지식 포인트 요약 1

이 글은 주로 객체지향 자바스크립트의 본질을 소개합니다(2부). 필요하신 분들은 참고하시면 됩니다.

생성자 및 프로토타입 객체

생성자도 new로 객체를 생성할 때 호출되는 함수입니다. 일반적인 함수와 다른 점은 첫 글자를 대문자로 표기해야 한다는 것입니다. 하지만 생성자를 일반 함수로 호출하는 경우(new 키워드가 누락됨) 이것이 가리키는 문제에 주의해야 합니다.

var name = "Pomy";
function Per(){
  console.log("Hello "+this.name);
}
var per1 = new Per(); //"Hello undefined"
var per2 = Per();  //"Hello Pomy"

new를 사용하면 이 객체가 자동으로 생성됩니다. 해당 유형은 생성자 유형이며 객체 인스턴스를 가리킵니다. new 키워드가 없으면 전역 객체를 가리킵니다.

instanceof를 사용하여 객체 유형을 감지할 수 있습니다. 동시에 각 객체는 생성될 때 생성자(리터럴 형식으로 생성된 객체 또는 객체 생성자를 가리키는 객체 생성자)를 가리키는 생성자 속성을 자동으로 갖습니다. 사용자 정의 생성자)는 해당 생성자를 가리킵니다.

console.log(per1 instanceof Per); //true
console.log(per1.constructor === Per); //true

모든 객체 인스턴스에는 객체의 프로토타입 객체를 가리키는 내부 속성 [[Prototype]]이 있습니다. 생성자 자체에도 프로토타입 객체를 가리키는 프로토타입 속성이 있습니다. 생성된 모든 객체는 이 프로토타입 객체의 속성과 메서드를 공유합니다.

function Person(){}
Person.prototype.name="dwqs";
Person.prototype.age=20;
Person.prototype.sayName=function()
{
  alert(this.name);
};
var per1 = new Person();
per1.sayName(); //dwqs
var per2 = new Person();
per2.sayName(); //dwqs
alert(per1.sayName == per2.sayName); //true

따라서 인스턴스의 포인터는 생성자가 아닌 프로토타입만 가리킵니다. ES5는 프로토타입 객체와 인스턴스 간의 관계를 반영하기 위해 hasOwnProperty() 및 isPropertyOf() 메소드를 제공합니다

alert(Person.prototype.isPrototypeOf(per2)); //true
per1.blog = "www.ido321.com";
alert(per1.hasOwnProperty("blog")); //true
alert(Person.prototype.hasOwnProperty("blog")); //false
alert(per1.hasOwnProperty("name")); //false
alert(Person.prototype.hasOwnProperty("name")); //true

프로토타입 객체의 constructor 속성은 생성자 자체를 가리키기 때문에 다시 작성할 때 constructor 속성에 주의해야 합니다. 프로토타입 포인팅 문제.

function Hello(name){
  this.name = name;
}
//重写原型
Hello.prototype = {
  sayHi:function(){
    console.log(this.name);
  }
};
var hi = new Hello("Pomy");
console.log(hi instanceof Hello); //true
console.log(hi.constructor === Hello); //false
console.log(hi.constructor === Object); //true

객체 리터럴 형식을 사용하여 프로토타입 객체를 다시 작성하면 생성자의 속성이 변경되므로 생성자는 Hello 대신 Object를 가리킵니다. 생성자 포인터가 중요한 경우 프로토타입 객체를 다시 작성할 때 생성자 속성을 수동으로 재설정해야 합니다

Hello.prototype = {
  constructor:Hello,
  sayHi:function(){
    console.log(this.name);
  }
};
console.log(hi.constructor === Hello); //true
console.log(hi.constructor === Object); //false

프로토타입 객체의 특성을 사용하여 JavaScript의 내장 프로토타입 객체에 사용자 정의 메서드를 쉽게 추가할 수 있습니다.

Array.prototype.sum=function(){
  return this.reduce(function(prev,cur){
    return prev+cur;
  });
};
var num = [1,2,3,4,5,6];
var res = num.sum();
console.log(res); //21
String.prototype.capit = function(){
  return this.charAt(0).toUpperCase()+this.substring(1);
};
var msg = "hello world";
console.log(msg.capit()); //"Hello World"

Inheritance

[[Prototype]] 기능을 사용하면 리터럴 형식의 객체에 대한 프로토타입 상속을 구현할 수 있습니다. Object.prototype은 암시적으로 [[Prototype]]으로 지정됩니다. create()는 명시적으로 지정되고 두 개의 매개변수를 허용합니다. 첫 번째는 [[Prototype]](프로토타입 객체)이 가리키는 객체이고 두 번째는 선택적 속성 설명자 객체입니다.

var book = {
  title:"这是书名";
};
//和下面的方式一样
var book = Object.create(Object.prototype,{
  title:{
    configurable:true,
    enumerable:true,
    value:"这是书名",
    wratable:true
  }
});

Literal 객체는 기본적으로 Object에서 상속됩니다. 더 흥미로운 사용법은 사용자 정의 객체 간의 상속을 구현하는 것입니다.

var book1 = {
  title:"JS高级程序设计",
  getTitle:function(){
    console.log(this.title);
  }
};
var book2 = Object.create(book1,{
  title:{
    configurable:true,
    enumerable:true,
    value:"JS权威指南",
    wratable:true
  }
});
book1.getTitle(); //"JS高级程序设计"
book2.getTitle(); //"JS权威指南"
console.log(book1.hasOwnProperty("getTitle")); //true
console.log(book1.isPrototypeOf("book2")); //false
console.log(book2.hasOwnProperty("getTitle")); //false

book2의 getTitle 속성에 액세스하면 JavaScript 엔진이 검색 프로세스를 수행합니다. 이제 book2의 자체 속성을 검색하고, 발견되지 않으면 [[Prototype]]을 검색합니다. 찾을 수 없으면 상속 체인이 끝날 때까지 프로토타입 객체의 [[Prototype]]을 계속 검색합니다. 끝은 일반적으로 [[Prototype]]이 null로 설정된 Object.prototype입니다.

상속을 구현하는 또 다른 방법은 생성자를 사용하는 것입니다. 각 함수에는 기본적으로 Object.prototype에서 상속되도록 자동으로 설정되는 쓰기 가능한 프로토타입 속성이 있습니다. 프로토타입 체인을 덮어써서 변경할 수 있습니다.

function Rect(length,width){
  this.length = length;
  this.width = width;
}
Rect.prototype.getArea = function(){
  return this.width * this.length;
};
Rect.prototype.toString = function(){
  return "[Rect"+this.length+"*"+this.width+"]";
};
function Square(size){
  this.length = size;
  this.width = size;
}
//修改prototype属性
Square.prototype = new Rect();
Square.prototype.constructor = Square;
Square.prototype.toString = function(){
  return "[Square"+this.length+"*"+this.width+"]";
};
var rect = new Rect(5,10);
var square = new Square(6);
console.log(rect.getArea()); //50
console.log(square.getArea()); //36

부모 클래스의 toString()에 액세스하려면 다음과 같이 하면 됩니다.

Square.prototype.toString = function(){
  var text = Rect.prototype.toString.call(this);
  return text.replace("Rect","Square");
}

위 내용은 중요한 JavaScript 지식 포인트 요약 1의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!