JavaScript_Basic 지식의 인스턴스 객체 및 프로토타입 객체의 예

먼저 다음을 선언하세요. JavaScript의 모든 객체에는 생성자 속성과 프로토타입 속성이 있습니다. 생성자는 객체의 생성자를 가리키고 프로토타입은 생성자를 사용하여 생성된 객체 인스턴스의 프로토타입 객체를 가리킵니다.

function Person(){ 
  
 } 
var person = new Person(); 
 
Person.prototype = { 
 constructor : Person, 
 name : 'zxs', 
 age : 24, 
 sayName : function(){alert(this.name)} 
 } 
  
person.sayName(); 

이 코드에서는 오류가 보고됩니다. sayName()이 정의되지 않았습니다. JavaScript Advanced Programme Second Edition에 따르면 이는 재정의된 프로토타입이 생성자와 원본 프로토타입 간의 연결을 끊기 때문이라고 합니다. 하지만 위 명령문의 순서를 조정해 보겠습니다. 다음과 같습니다:

function Person(){ 
 } 
//var person = new Person(); 
Person.prototype = { 
 constructor : Person, 
 name : 'zxs', 
 age : 24, 
 sayName : function(){alert(this.name)} 
} 
/*===========================================================*/ 
var person = new Person(); 
/*===========================================================*/ 
 person.sayName(); // zxs 
alert(person.constructor) //function Object() { [native code]} or function Person() {} 取决与蓝色的语句是否有效 

위의 두 코드에서 등호 사이의 구문에 주의하세요. 두 번째 단락의 순서대로 코드를 작성하면 "zxs"가 출력됩니다. 이 결과는 첫 번째 경우에 보고된 오류가 생성자와 원래 아이디어 간의 연결이 끊어져서 발생했다는 의미는 아니라는 것을 보여줍니다. .

Person.prototype = ｛｝ 

원래는 객체를 정의하는 방법이며, JavaScript의 각 객체의 constructor 속성은 기본적으로 Object 생성자를 가리킵니다. 이는 프로토타입 객체를 다시 작성하면 생성자와 생성자 사이의 연결이 끊어진다는 것을 보여주는 것은 어렵지 않습니다. 원래 프로토타입 연결이지만 이 연결이 끊어진 후에 사람이 sayName() 함수에 액세스할 수 없다는 의미는 아닙니다.

이제 다음과 같은 가정이 있습니다. 함수의 프로토타입 속성이 가리키는 프로토타입 객체는 우리가 새 객체를 생성하기 위해 표시하는 프로토타입 객체와 정확히 동일하지 않습니다. 함수를 호출하면 프로토타입 객체가 생성됩니다. 이때 해당 프로토타입 객체가 현재 환경에 존재하는지 먼저 확인합니다. 프로그램에 없으면 생성합니다. 마지막으로 검색 결과에 따라 프로토타입 객체가 반환됩니다. 이 객체의 속성과 메소드는 항상 기본 프로토타입의 속성과 메소드, 즉 에 정의된 속성과 메소드를 사용합니다. 생성자. 호출된 메서드나 속성이 기본 프로토타입에 없으면 Person.prototype = {}에 정의된 속성과 메서드가 사용됩니다.

Javascript는 해석된 언어이며 명령문은 순차적으로 실행됩니다. 첫 번째 코드에서는 new 키워드를 사용하여 새 객체를 생성할 때 Person.prototype = {}가 실행되지 않습니다. 거기에 정의된 프로퍼티는 현재 실행 환경에서 찾을 수 없고, 해당 메소드가 생성자에 존재하지 않아 오류가 발생합니다. 변수와 마찬가지로 값을 할당할 때 프로그램이 실행되지 않는 경우에는 사용할 수 없습니다. 두 번째 단락에서는 호출된 메서드가 환경에 이미 존재하고 생성자의 프로토타입 객체가 생성되었으므로 결과를 얻을 수 있습니다.

다음 프로그램을 보세요:

////////////////////////////////////////////////////////////////////////// 
 
function Person(){} 
 
/*===========================================================*/ 
 
 var person = new Person(); 
Person.prototype.name = 'song'; 
 
/*===========================================================*/ 
 
//Person.prototype.sayName = function(){alert(this.name)}; 
Person.prototype = { 
constructor : Person, 
name : 'zxs', 
age : 24, 
sayName : function(){alert(this.name)} 
} 
person.sayName(); // error 
 
////////////////////////////////////////////////////////////////////////// 
 
function Person(){  } 
/*var person = new Person();*/ 
Person.prototype.name = 'song';  
/*Person.prototype.sayName = function(){alert(this.name)};*/ 
Person.prototype = {   
constructor : Person, 
  name : 'zxs', 
  age : 24, 
  sayName : function(){alert(this.name)} 
} 
 
/*===========================================================*/ 
var person = new Person(); 
 
/*===========================================================*/ 
person.sayName(); // zxs 

여기서 보면 Person.prototype.name = ''을 사용하면 객체가 생성된 위치에 관계없이 객체에 액세스할 수 있음을 알 수 있습니다. 이 메소드에 의해 정의된 객체 리터럴과 프로토타입 객체가 모두 있으면 나중에 정의된 객체가 최종 값으로 사용됩니다. 그리고 프로토타입 객체에 대한 객체 리터럴 정의를 사용한 후에 정의는 객체에 액세스하기 전에 객체를 생성하는 명령문 앞에 나타나야 합니다.

인스턴스는 프로토타입 객체의 속성과 메서드에 액세스할 수 없습니다. 특히 프로토타입 객체를 재정의하면 생성자와 원본 프로토타입 간의 연결이 끊어지기 때문입니다.

function Person(){  
    
  }  
var person = new Person();  
  
Person.prototype = {  
  //constructor : Person,  
  name : 'zxs',  
  age : 24,  
  sayName : function(){alert(this.name)}  
  }  
    
person.sayName();  

위 코드에서 생성자의 프로토타입은 객체를 인스턴스화할 때 비어 있으며, 기본 속성 외에 다른 속성이 없습니다. 생성자의 프로토타입을 재정의하면 생성자와 원본 프로토타입 간의 연결이 끊어집니다.

new 연산자를 사용한 후 생성자의 프로토타입 객체에 있는 속성과 메서드가 person 객체에 추가되었습니다. 위의 메서드는 함수 프로토타입에 새로운 속성과 메서드를 추가하는 데 동적이지 않기 때문에 새로 추가된 속성과 메서드에 사람이 접근할 수 없습니다.

프로토타입 객체를 다시 작성하면 다음 코드와 같습니다.

var o = { 
  name : 'zxs' 
  } 
   
var obj = o; 
o = {} 
console.log(o.name);  

이번 출력값은 객체가 참조형이고, "="가 대입 연산자이고, 연산 순서가 오른쪽에서 왼쪽이므로 정의되지 않았습니다. o={}는 o를 가리키는 위치가 변경되었으며 빈 객체임을 의미합니다.
Person.prototype.mothed = function() {}과 Person.prototype={mothed:function(){}}의 차이점은 arr = [] 및 arr.push()와 동일하지만 전자는 자체적으로 수정됩니다. 후자는 자신을 완전히 변화시킵니다.