javascript中的prototype原型、_proto

prototype原型

JavaScript是面向对象的语言，那么继承自然是其重要特征之一。与标准面向对象语言不同，JavaScript继承主要通过prototype原型实现。每一个函数都具有prototype属性。此属性指向一个对象，我们称此对象为原型对象。
为了满足实际需求，原型对象可能需要自定义:

function fun(){this.webName = "Q点调皮的博客";
}
fun.prototype.address = "成都";
fun.protoType.year = "2019";
console.log(fun.prototype.address);//成都
console.log(fun.prototype.year);//2019

将函数作为构造函数创建的对象实例会继承此原型对象中的成员。
（1）构造函数内定义的属性/方法，对象实例独立所有，也就是每一个实例都切切实实有一份。
（2）被继承的原型对象中属性/方法是共享的。由于原型对象是共享的，所以改变原型对象的age属性值，两个实例对象的age属性值也跟着改变。

fcnction fun(name){this.webName = name;
}
fun.prototype.address = "成都";
fun.protoType.year = "2019";
let f1 = new func("name1");
let f2 = new func("name2");
func.prototype={url:'https://mp.csdn.net/';
};
console.log(f1.address);//成都
console.log(f1.url);//undefined
console.log(f2.address);//成都
console.log(f2.url);//undefined

上面代码是重置原型对象，也就是说最初的原型对象被替换。但是为什么address属性依然存在，反而新原型对象的url属性却没有找到呢。这是因为在重置原型对象之前，对象实例f1与f2已经被创建，__proto__指向原来的原型对象，现在重置原型对象实质就是将prototype指向一个新的对象，但是并没有人拨动__proto__指针指向这个新的原型对象，所以依然指向原来的原型对象。

proto属性

__proto__属性外观比较奇特，因为它原本是一个内部属性。此属性可以返回或者设置对象的原型对象。

function fun(){this.webName = "Q点调皮的博客";
}
fun.prototype.address = "成都";
fun.prototype.year = "2019";
let f1 = new fun();
console.log(f1.__proto_ === fun.ptorotype);//true
console.log(f1.hasOwnProperty("__proto__"));//false

代码返回值为true，分析：
（1）对象实例f1的__proto__属性指向它的构造函数的prototype原型对象。
（2）也就是说__proto__属性拥有者身份是对象实例，它指向创建此对象实例的构造函数的原型对象。当然要辩证的看问题，比如构造函数fun也具有__proto__属性，因为它也是Function构造函数的实例。
（3）f1.hasOwnProperty(“proto”)返回false，说明此属性是继承自原型链，非自有属性。__proto__是访问器属性。具体参阅JavaScript get set访问器属性。

(typeof Object.prototype) === Object;//true
Object.prototype.__proto__=== null;//true
Object.prototype.prototype === undefined;//true

Object.prototype只是一个普通对象(普通对象没有prototype属性，所以值是undefined)，Object.prototype是js原型链的最顶端，它的__proto__是null(有__proto__属性，但值是null，因为这是原型链的最顶端)。
js中每一个对象或函数都有__proto__属性，但是只有函数对象才有prototype属性。原型链是基于__proto__形成的，继承是通过prototype实现的。

Function.prototype是个特例，它是函数对象，但是没有prototype属性。其他所有函数都有prototype属性。

(typeof Function.prototype) === function;//true
Function.prototype.prototype === undefined;//true

内置的Function也是一个函数对象，它是通过自己来创建自己的。函数也是对象，因为Function.prototype__proto__指向Object.prototype。

(typeof Function.__proto__) === function;//true
Function.__proto__=== Function.prototype;//true
(typeof Function.prototype.__proto__) === "object";//true
Function.prototype.__proto__=== Object.prototype;//true

原型鏈

原型链是基于__proto__形成的，继承是通过prototype实现的。
每个对象都有一个__proto__属性，原型链上的对象正是依靠这个__proto__属性连结在一起的! 对于原型链上的一个对象obj，那么访问obj.xxx属性(方法也是属性)的过程是: 如果自身有xxx属性，则访问它；如果没有，就通过__proto__属性找到其原型链的上一级原型对象，看它有没有xxx属性，如此递归查找，直至找到xxx属性或到了原型链顶端Object.prototype对象为止。函数拥有prototype属性，该属性值是一个object类型。当函数A创建对象B的时候，B对象的__proto__会指向A.prototype，这就是javascript的继承。

function fun(){this.webName = "Q点调皮的博客";
}
fun.prototype.address = "成都";
fun.prototype.year = "2019";
let f1 = new fun();
console.log(f1.__proto_ === fun.ptorotype);//true

f1通过__proto__属性指向构造函数的原型对象。原型对象也是一个普通对象，也具有__proto__属性，指向创建原型对象的构造函数的prototype对象。这样一层一层将原型对象串接成一个原型链，可以很长。当在一个对象上查找指定属性或者方法的时候，如果没有查找到，那么就会在原型链上一层一层查找。原型链的最后的终点是Object.prototype，因为Object.prototype.__proto__指向null。

javascript中的prototype原型、_proto_属性、原型链相关推荐

Javascript中的prototype
Prototype理解 prototype(原型) 在JavaScript中,prototype对象是实现面向对象的一个重要机制. 每个函数就是一个对象(Function),函数对象都有一个子对象pr ...
了解下JavaScript中的prototype
JS中的phototype是JS中比较难理解的一个部分.javascript的方法可以分为三类:类方法,对象方法,原型方法. 例子: function People(name) {this.name= ...
了解JavaScript中的prototype （实例）
JS中的phototype是JS中比较难理解的一个部分.javascript的方法可以分为三类:类方法,对象方法,原型方法. 例子: function People(name) {this.name= ...
JavaScript中的prototype（Notes）
首先,JavaScript中每个对象都有prototype属性,他是用来返回对象类型原型的引用的.我们使用prototype属性提供对象的类的一组基本功能.并且对象的新实例会"继承" ...
JavaScript中四种不同的属性检测方式比较
JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...
JavaScript中Object.prototype.toString方法的原理
在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. <一>, ECMAScript 3 1. 在E ...
使用JavaScript中的示例编号MAX_VALUE属性
数字MAX_VALUE属性 (Number MAX_VALUE Property) MAX_VALUE Property is a Number property in JavaScript and ...
js获取html元素并且修改属性,JavaScript中获取和修改元素属性的值
在上一篇关于<JavaScript中几个操作元素对象的函数方法>文章中记录了分别通过元素的ID属性,元素的标签名,Class类名来获取元素的节点对象. 今天记录两个函数可以用来获取和修改获 ...
JavaScript中函数里的arguments属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

javascript中的prototype原型、_proto_属性、原型链

prototype原型

proto属性

原型鏈

javascript中的prototype原型、_proto_属性、原型链相关推荐

最新文章

热门文章