자바스크립트 객체지향을 배우고 자바스크립트 프로토타입 및 프로토타입 chain

먼저 사진을 보고 정리해보세요.

1. 기본 개념
[프로토타입 체인]각 생성자에는 개체가 있고, 프로토타입 개체에는 생성자에 대한 포인터가 포함되어 있으며, 인스턴스에는 프로토타입 개체에 대한 내부 포인터가 포함되어 있습니다. 그런 다음 프로토타입 개체가 다른 프로토타입의 인스턴스와 동일하면 이때 프로토타입 개체에는 다른 프로토타입에 대한 포인터가 포함됩니다. 이에 따라 다른 프로토타입에도 다른 생성자에 대한 포인터가 포함됩니다. 다른 프로토타입이 다른 프로토타입의 인스턴스인 경우 위의 관계는 여전히 유지됩니다. 이러한 계층별 진행은 인스턴스와 프로토타입의 체인을 형성합니다.
【프로토타입 객체】이 객체에는 특정 유형의 모든 인스턴스가 공유할 수 있는 속성과 메서드가 포함되어 있습니다. 모든 참조 유형은 기본적으로 Object를 상속하며, 이 상속도 프로토타입 체인을 통해 구현됩니다. 모든 함수의 기본 프로토타입은 Object의 인스턴스이므로 기본 프로토타입에는 Object.prototype을 가리키는 내부 포인터가 포함됩니다. 이것이 바로 모든 사용자 정의 유형이 toString() 및 valueOf() 메서드를 상속하는 이유입니다.
[생성자]생성자와 다른 함수의 차이점은 호출 방식에 있습니다. 일반적으로 함수는 new 연산자를 통해 호출되면 생성자로 사용할 수 있지만, new 연산자를 통해 호출되지 않으면 일반 함수와 다르지 않습니다.
[참고] JavaScript의 사용자 정의 함수 및 내장 생성자를 생성자로 사용할 수 있습니다
[생성자 작성법]생성자는 항상 대문자로 시작하고, 비생성자는 소문자로 시작해야 합니다. 이 접근 방식은 주로 ECMAScript의 다른 함수와 구별하기 위해 다른 OO 언어에서 차용한 것입니다. 생성자 자체도 함수이지만 객체를 생성하는 데 사용할 수 있기 때문입니다
[생성자의 세 가지 사용 시나리오]
[a] 생성자로 사용

var person = new Person("Nicholas",29,"software Engineer");
person.sayName();

로그인 후 복사

[b] 일반 함수로 호출

Person("greg",27,"doctor");//添加到window
window.sayName();//"Greg"

로그인 후 복사

[c] 다른 객체의 범위에서
을 호출합니다.

var o = new Object();
Person.call(o,"Kristen",25,"Nurse");
o.sayName();//"Kristen"

로그인 후 복사

【prototype属性】只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。
[注意]只有函数才有prototype属性，object没有prototype属性
【constructor属性】在默认情况下，所有原型对象都会自动获得一个constructor(构造函数)属性，这个属性包含一个指向prototype属性所在函数的指针
[注意]创建了自定义的构造函数之后，其原型对象默认只会取得constructor属性，至于其他方法则都是从Object继承而来的
【_proto_和[[prototype]]】当调用构造函数创建一个新实例后，该实例的内部将包含一个指针(内部属性)，指向构造函数的原型对象。ECMA-262第5版管这个指针叫[[prototype]]。虽然在脚本中标准的方式访问[[prototype]]，但firefox\safari\chrome在每个对象上都支持一个属性_proto_;而在其他实现中，这个属性对脚本则是完全不可见的。这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间
二、基本操作　　
【原型链查询】每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象实例本身开始，如果在实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性，如果找到了这个属性，则返回该属性的值。
【添加实例属性】当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性；换句话说，添加这个属性只会阻止我们访问原型中的那个属性，但不会修改那个属性，即使将这个属性设置为null,也只会在实例中设置这个属性，而不会恢复其指向原型的连接。不过，使用delete操作符则可以完全删除实例属性，从而让我们能够重新访问原型中的属性。
【原型的动态性】由于在原型中查找值的过程是一次搜索，因此我们对原型对象所做的任何修改都能立即从实例上反映出来，即使是先创建了实例后修改原型也照样如此。
[注意]不推荐在产品化的程序中修改原生对象的原型

function Person(){};
var friend = new Person();
Person.prototype.sayHi = function(){
  alert('hi');
}
friend.sayHi();//"hi"

로그인 후 복사

【重写原型】调用构造函数时会为实例添加一个指向最初原型的[[prototype]]指针，而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。实例中的指针仅指向原型，而不指向构造函数。
三、基本方法　　
[1]isPrototypeOf()：判断实例对象和原型对象是否存在于同一原型链中，只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型

function Person(){};
var person1 = new Person();
var person2 = new Object();
console.log(Person.prototype.isPrototypeOf(person1));//true
console.log(Object.prototype.isPrototypeOf(person1));//true
console.log(Person.prototype.isPrototypeOf(person2));//false
console.log(Object.prototype.isPrototypeOf(person2));//true

로그인 후 복사

[2]ECMAScript5新增方法Object.getPrototypeOf():这个方法返回[[Prototype]]的值

function Person(){};
var person1 = new Person();
var person2 = new Object();
console.log(Object.getPrototypeOf(person1)); //Person{}
console.log(Object.getPrototypeOf(person1) === Person.prototype); //true
console.log(Object.getPrototypeOf(person1) === Object.prototype); //false
console.log(Object.getPrototypeOf(person2)); //Object{}

로그인 후 복사

[3]hasOwnProperty():检测一个属性是否存在于实例中

function Person(){
  Person.prototype.name = 'Nicholas';
}
var person1 = new Person();
//不存在实例中，但存在原型中
console.log(person1.hasOwnProperty("name"));//false
//不存在实例中，也不存在原型中
console.log(person1.hasOwnProperty("no"));//false
person1.name = 'Greg';
console.log(person1.name);//'Greg'
console.log(person1.hasOwnProperty('name'));//true
delete person1.name;
console.log(person1.name);//"Nicholas"
console.log(person1.hasOwnProperty('name'));//false

로그인 후 복사

[4]ECMAScript5的Object.getOwnPropertyDescriptor():只能用于取得实例属性的描述符，要取得原型属性的描述符，必须直接在原型对象上调用Object.getOwnPropertyDescription()方法

function Person(){
  Person.prototype.name = 'Nicholas';
}
var person1 = new Person();
person1.name = 'cook';
console.log(Object.getOwnPropertyDescriptor(person1,"name"));//Object {value: "cook", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(Person.prototype,"name"));//Object {value: "Nicholas", writable: true, enumerable: true, configurable: true}

로그인 후 복사

[5]in操作符:在通过对象能够访问给定属性时返回true，无论该属性存在于实例还是原型中

function Person(){}
var person1 = new Person();
person1.name = 'cook';
console.log("name" in person1);//true
console.log("name" in Person.prototype);//false
var person2 = new Person();
Person.prototype.name = 'cook';
console.log("name" in person2);//true
console.log("name" in Person.prototype);//true

로그인 후 복사

[6]同时使用hasOwnProperty()方法和in操作符，来确定属性是否存在于实例中

//hasOwnProperty()返回false,且in操作符返回true，则函数返回true，判定是原型中的属性
function hasPrototypeProperty(object,name){
  return !object.hasOwnProperty(name) && (name in object);
}
function Person(){
  Person.prototype.name = 'Nicholas';
}
var person1 = new Person();
console.log(hasPrototypeProperty(person1,'name'));//true
person1.name = 'cook';
console.log(hasPrototypeProperty(person1,'name'));//false
delete person1.name;
console.log(hasPrototypeProperty(person1,'name'));//true
delete Person.prototype.name;
console.log(hasPrototypeProperty(person1,'name'));//false

로그인 후 복사

[7]ECMAScript5的Object.keys()方法:接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组
[注意]一定要先new出实例对象再使用该方法，否则为空

function Person(){
  Person.prototype.name = 'Nicholas';
  Person.prototype.age = 29;
  Person.prototype.job = 'Software Engineer';
  Person.prototype.sayName = function(){
    alert(this.name);
  }  
};
var keys = Object.keys(Person.prototype);
console.log(keys);//[]
var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var keys = Object.keys(Person.prototype);
console.log(keys);//["name","age","job","sayName"]
var p1Keys = Object.keys(p1);
console.log(p1Keys);//["name","age"]

로그인 후 복사

[8]ECMAScript5的Object.getOwnPropertyNames()方法:接收一个对象作为参数，返回一个包含所有属性的字符串数组
[注意]一定要先new出实例对象再使用该方法，否则只有constructor

function Person(){
  Person.prototype.name = 'Nicholas';
  Person.prototype.age = 29;
  Person.prototype.job = 'Software Engineer';
  Person.prototype.sayName = function(){
    alert(this.name);
  }  
};
var keys = Object.getOwnPropertyNames(Person.prototype);
console.log(keys);//["constructor"]
var p1 = new Person();
var keys = Object.getOwnPropertyNames(Person.prototype);
console.log(keys);//["constructor", "name", "age", "job", "sayName"]

로그인 후 복사

希望本文所述对大家学习javascript程序设计有所帮助。