原型和原型链

117 阅读3分钟

1、什么是原型? JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object ,Function 是JS自带的函数对象。每个对象都有原型(null和undefined除外),你可以把它理解为对象的默认属性和方法。 Object: Object是一个函数对象,Object的原型就是一个Object对象,它里面存在着一些对象的方法和属性,例如最常见的toString方法。

新建对象: 用new Object或者{}建的对象是普通对象,它没有prototype属性,只有__proto__属性,它指向Object.prototype。

Array: Array也是一个函数对象,它的原型就是Array.prototype,它里面存在着一些数组的方法和属性,例如常见的push,pop等方法。

Function: Function也是一个函数对象,但它有点特殊,它的原型就是一个function空函数。

自定义函数: 它的原型就是你给它指定的那个东西。如果你不指定,那它的原型就是一个Object.prototype。 2、什么是原型链? 在JavaScript 中,每个对象都有一个指向它的原型(prototype)对象的内部链接。这个原型对象又有自己的原型,直到某个对象的原型为 null 为止(也就是不再有原型指向),组成这条链的最后一环。这种一级一级的链结构就称为原型链(prototype chain)

JavaScript 对象是动态的属性“包”(指其自己的属性)。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依此层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。

3、prototype与__proto__有什么不同,有什么联系? 在Javascript中,每个函数都有一个原型属性prototype指向自身的原型,而由这个函数创建的对象也有一个__proto__属性指向这个原型,而函数的原型是一个对象(函数点prototype也是一个普通对象,Function.prototype除外,它是函数对象,但它很特殊,他没有prototype属性),所以这个对象也会有一个__proto__指向自己的原型,这样逐层深入直到Object对象的原型,这样就形成了原型链。普通对象没有prototype,但有__proto__属性。 JS在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__的内置属性,用于指向创建它的函数对象的原型对象prototype。

4、constructor与面两个有什么联系,怎么用? 普通对象的__proto__

\

var o = {name:"tsrot"};
console.log(o.__proto__); 
//Object{}
console.log(o.prototype); 
//undefined
console.log(o.__proto__ === Object.prototype);  
//true

\

4.1构造对象的__proto__

\

function Parent(){
this.name = "i am parent";
}
Parent.prototype = {age:24};
function Child(){
this.name = "i am child";
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
var child = new Child();
console.log(child.__proto__); //Object{}
console.log(Child.prototype); //Object{}
console.log(child.__proto__ === Child.prototype); 
//true
console.log(Parent.prototype.__proto__ === 
Object.prototype); //true

\

4.2数组的__proto__

\

var arr = [1,2,3];
console.log(arr.__proto__);  
//[Symbol(Symbol.unscopables): Object]
console.log(Array.prototype); 
//[Symbol(Symbol.unscopables): Object]
console.log(arr.__proto__ === Array.prototype); //true

\

4.3函数的__proto__

\

var fun = function(){
var hello = "i am function"
}
fun.prototype = {name:"tsrot"};
console.log(fun.prototype); 
//Object {name: "tsrot"}
console.log(fun.__proto__); 
//function(){}
console.log(fun.prototype === fun.__proto__); 
//false
console.log(fun.__proto__ === Function.prototype); 
//true