JavaScirpt中的原型,原型对象和原型链

一.什么是原型呢? 

我们创建每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象.(即prototype即为函数的原型该原型指向的是一个原型对象)

二.什么是原型对象呢?

  • 我们创建每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象(即原型对象).而这个对象的用途是包含

   可以由特定类型的所有 实例 共享的属性和方法.(字面意思prototype就是通过调用构造函数而创建的实例对象的原型对象)

  • 使用原型对象的好处是可以让所有的对象实例(实例对象)共享他包含的所有的属性和方法
  • 需要特别注意的是原型对象的理解,只要创建一个函数,该函数就会创建一个prototype(原型)属性,这个属性指向函数的原型对象

三.原型对象和原型的关系?

__proto__是什么呢?

  • 这是每一个JavaScript对象(除了 null )都具有的一个属性,叫__proto__,这个属性会指向该对象的原型。
  • 当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性即__proto__),指向构造函数的原型对象

  constructor是什么呢?

  • 在默认情况下,所有的原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针即(Person.prototype.constructor指向Person),而通过这个构造函数,我们可以继续为原型对象添加起他属性和方法

  通过一张图片展示他们之间的关系

  

 代码示例:

//创建一个构造函数,并在构造函数的原型上添加一个name属性
function Person(){
}
Person.prototype.name = "kebi"var person1 = new Person();console.log(person1.name)  //kebi
var perso2 = new Person();console.log(person2.name)  //kebi
console.log(person.__proto__ === Person.prototype); // true 他两个的关系也是完全相等的

console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true//b.isPrototypeOf(a)    这个方法的意思是,a对象是否指向b对象Person.prototype.isPrototypeOf(person1)  //true    因为person1中有一个__proto__属相指向原型对象(Person.prototype)
Person.prototype.isPrototypeOf(person2)  //true   同理
 

总结一下prototype和__proto__到底是什么关系呢?

  • 函数对象的prototype属性, 可以称之为显式原型属性(简称: 显式原型)
  • 实例对象的__proto__属性, 可以称之为隐式原型属性(简称: 隐式原型)
  • 原型对象: 也就是prototype属性和_proto__属性指向的对象

四.什么是原型链? 

  1.原型的搜索机制

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

   代码例子: 

function Person() {

}

Person.prototype.name = ‘heyushuo‘;

var person = new Person();

person.name = ‘kebi‘;
console.log(person.name) // kebi

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

在这个例子中,我们给实例对象 person 添加了 name 属性,当我们打印 person.name 的时候,结果自然为 kebi。

但是当我们删除了 person 的 name 属性时,读取 person.name,从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.__proto__ ,也就是 Person.prototype中查找 (原型对象中),幸运的是我们找到了 name 属性,结果为 heyushuo。

但是万一还没有找到呢?原型的原型又是什么呢? ( 肯定需要一环一环地前行到原型链的末端才会停下来)

  最顶层为默认的原型

  所有的函数的默认原型都是Object的实例,所以默认原型都会包含一个内部指针,指向Object.prototype(默认原型的原型对象),这也真是所有自定义类型都会继承toString()/valueOf等默认的方法的根本原因.一直查到最顶层才算一个完整的原型链

如图所示: 蓝色线为完整的原型链

参考:Javascript:高级程序设计

 javascript深入之从原型到原型链(感觉原型和原型对象未分清楚)

原文地址:https://www.cnblogs.com/heyushuo/p/9860621.html

时间: 2024-10-11 06:09:21

JavaScirpt中的原型,原型对象和原型链的相关文章

类中的方法(对象的原型中的方法)消失

问题: 使用indexdb,sqlite等本地储存后再取出对象导致类中的方法(对象的原型中的方法)消失. 解决方法: 使用Object.assign()合并对对象.这时,this.details中的每个元素都是RetailOrderDetailEditDto的实例化对象. 重新构造一个对象new RetailOrderDetailEditDto(), 这个对象中包含所需要的方法,toJSON等. this.details = this.details.map(e => { this.amount

原型,对象和原型链

普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象. 原型对象 在JavaScript 中,每当定义一个对象(函数)时候,对象中都会包含一些预定义的属性.其中函数对象的一个属性就是原型对象 prototype.注:普通对象没有prototype,但有__proto__属性.优点:包含可以让所有实例共享的属性和方法缺点:省略了为构造函数传递初始参数:所有实例在默认情况下的参数一致 共享用途:面

秒懂javascript的原型(prototype)对象、原型链的前世今生

在上文中我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this.userName = uName; } CreateObj.prototype.showUserName = function(){ return this.userName; } var obj1 = new CreateObj('ghostwu'); var obj2 = new CreateObj('

08.22 javaScript 原型的定义 原型链 获取原型 操作原型的属性 判断原型是自有的还是继承的 各种方法

# 原型 ### 定义 * 每一个对象都有原型 * 原型仍然是一个对象 * 模拟实现面向对象的继承性 ### 原型链 * 对象的原型还有原型 * 对象除了可以使用自有属性还可以继承原型上的属性 ### 获取原型 * 对象.__proto__ * 构造函数.prototype ### 操作原型的属性 * 原型本身就是对象,同操作对象 ### 判断属性是自有的还是原型继承的 * hasOwnProperty() ### ECMA5中创建对象并指定对象的原型 * Object.create(); #

原型、实例化、原型链

在使用面对对象编程时,对象间的继承关系自然少不了!而原型正是实现javascript继承的很重要的一种方法!JS的原型链只针对 对象,仅对象才具有的!!! function person(name, age) { this.name = name; this.age = age; } person.prototype.getInfo = function() { alert("My name is "+this.name+", and I have "+this.a

JS中面向对象的,对象理解、构造函数、原型、原型链

6.1 理解对象 6.1.1 对象属性类型 ECMS属性有两种类型:数据属性和访问器属性 1 数据属性 [[configurable]] 表示能否通过Delete 删除属性从而从新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性.对象上定义的属性默认值为true [[enumerable]] 表示能否通过for-in循环返回属性.直接在对象上定义的属性,它们的这个特性默认值为true [[writable]] 表示能否修改属性值.像前面例子中那样直接在对象上定义的属性,它们默认值为t

基类中定义的虚函数在派生类中重新定义时,其函数原型,包括返回类型、函数名、参数个数、参数类型及参数的先后顺序,都必须与基类中的原型完全相同 but------> 可以返回派生类对象的引用或指针

您查询的关键词是:c++primer习题15.25 以下是该网页在北京时间 2016年07月15日 02:57:08 的快照: 如果打开速度慢,可以尝试快速版:如果想更新或删除快照,可以投诉快照. 百度和网页 http://bbs.csdn.net/topics/380238133 的作者无关,不对其内容负责.百度快照谨为网络故障时之索引,不代表被搜索网站的即时页面. 首页 精选版块 移动开发 iOS Android Qt WP 云计算 IaaS Pass/SaaS 分布式计算/Hadoop J

Javascript中的对象和原型(3)

在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型对象实际上就是构造函数的一个实例对象,和普通的实例对象没有本质上的区别.可以包含特定类型的所有实例的共享属性或者方法.这样,如果我们需要修改所有实例中的属性或者方法,就只需要修改一处,就能够影响到所有实例了.因为原型中的属性和方法是共享的.我们可以看下两个图示:       构造函数方式 原型模式方

Javascript中的对象和原型

一 原型对象 原型对象实际上就是构造函数的一个实例对象,和普通的实例对象没有本质上的区别.可以包含特定类型的所有实例的共享属性或者方法.这样,如果我们需要修改所有实例中的属性或者方法,就只需要修改一处,就能够影响到所有实例了.因为原型中的属性和方法是共享的.我们可以看下两个图示:       构造函数方式 原型模式方式 从上面的图示中我们就不难看出,为何下面的代码中"user1.show == user2.show;"返回的是ture,因为show方法是所有由User构造函数创建的对象