js之从原型到原型链

2021-11-24 15:33:10 阅读：117 来源： 互联网

标签：name person 对象 js Person 原型 prototype

构造函数创造对象

function  Person(){
    
}
var person = new Person()
person.name = 'kevin'

Person是个构造函数,使用new创建了一个实例对象person

prototype

每个函数都有一个prototype属性

function Person(){

}
Person.prototype.name='kevin'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

构造函数和实例原型的关系图

函数的prototype指向一个对象，该对象是该构造函数创造的实例对象的原型，也就是该例子中person1,person2的原型。所谓原型,就是每一个js对象(除了null)在创建的时候就会关联另一个对象，这个对象就是所谓的原型，每一个对象都会从原型继承属性

_proto_

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

实例与实例原型的关系图

每一个js对象(除null)都具有一个属性，叫_proto_，这个属性会指向该对象的原型

constructor

每个原型都有一个 constructor 属性指向关联的构造函数。

function Person() {

}
console.log(Person === Person.prototype.constructor); // true

实例原型与构造函数的关系图

object.getPrototypeOf(person) === Person.prototype //获取对象的原型方法

实例与原型

当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果和查不到就会去找原型的原型，一直到顶层为止

function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin

原型的原型

原型的原型关系图

原型链

Object.prototype.__proto__ === null

null表示没有对象，所以说Object.prototype没有原型，即查找属性到达Object.prototype时可以停止查找了

原型链示意图

补充

1.constructor

function Person() {

}
var person = new Person();
console.log(person.constructor === Person); // true

当获取person.constructor的时候，其实person当中并没有constructor这一属性，所以它会从person的原型也就是Person.prototype中读取，所以

person.constructor === Person.prototype.contructor

2._proto_

_proto_实际上并不存在与Person.prototype中，实际上是来自于Object.prototype,

当使用obj.proto_时，实际上是调用了Object.getPrototypeOf(obj)

3.继承

"每一个对象都会从原型'继承'属性"这句话，继承意味着复制操作，实际上js默认不会复制对象的属性，js只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托来访问另一个对象的属性和函数

标签：name,person,对象,js,Person,原型,prototype
来源： https://blog.csdn.net/weixin_47552598/article/details/121514631

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9