首页 > 编程语言 >JavaScript prototype(原型对象)

JavaScript prototype(原型对象)

时间:2024-06-10 12:31:07浏览次数:17  
标签:last 对象 age JavaScript eyecolor Person 原型 prototype

 所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。

在前面的章节中我们学会了如何使用对象的构造器(constructor):

实例

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

我们也知道在一个已存在构造器的对象中是不能添加新的属性:

实例

Person.nationality = "English";

要添加一个新的属性需要在在构造器函数中添加:

实例

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

prototype 继承

所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法:

  • Date 对象从 Date.prototype 继承。
  • Array 对象从 Array.prototype 继承。
  • Person 对象从 Person.prototype 继承。

所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。

Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。

添加属性和方法

有的时候我们想要在所有已经存在的对象添加新的属性或方法。

另外,有时候我们想要在对象的构造函数中添加属性或方法。

使用 prototype 属性就可以给对象的构造函数添加新的属性:

实例

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.nationality = "English";

当然我们也可以使用 prototype 属性就可以给对象的构造函数添加新的方法:

实例

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};

标签:last,对象,age,JavaScript,eyecolor,Person,原型,prototype
From: https://blog.csdn.net/2402_83140078/article/details/139569626

相关文章

  • JavaScript Number 对象
     JavaScript只有一种数字类型。可以使用也可以不使用小数点来书写数字。JavaScript数字JavaScript数字可以使用也可以不使用小数点来书写:实例varpi=3.14;//使用小数点varx=34;//不使用小数点极大或极小的数字可通过科学(指数)计数法来写:实例vary=1......
  • 网上 copy 的一段 javascript 代码 String.prototype.replaceAll = fucntion(){...}
    早些年,浏览器没有内置字符串的replaceAll()方法,就从网上copy了一段replaceAll()的实现:String.prototype.replaceAll=function(AFindText,ARepText){raRegExp=newRegExp(AFindText,"g");returnthis.replace(raRegExp,ARepText)}今天突然遇到一个问题,定位到了这段代码,我......
  • 让你的网页动起来:Javascript+CSS拖曳盒子指南
    让网页上的元素具有拖拽功能,可以提升用户体验,尤其是在需要用户交互的场景中。下面是一个使用JavaScript和CSS来实现拖拽效果的基本指南。1.HTML结构首先,你需要在HTML中定义一个可拖拽的元素,通常是一个div。 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"......
  • 【JavaScript】了解 Sass:现代 CSS 的强大预处理器
    我已经从你的全世界路过像一颗流星划过命运的天空很多话忍住了不能说出口珍藏在我的心中只留下一些回忆                     ......
  • 【华为OD】D卷真题100分:数组拼接 JavaScript代码实现[思路+代码]
    【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客JS、Java、C、C++、python代码实现:【华为OD】D卷真题100分:数组拼接JavaScript代码实现[思路+代码]-CSDN......
  • JS(JavaScript)学习总结
    概念:JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语   言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站(中山)
    HTML+CSS+JS【旅游网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript广东传统文化
    HTML+CSS+JS【传统文化】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 一起学习javascript-进阶版函数(1)
    <script>  //举个例子 functionsum(x){    returnx+1;  }    functionadd(a,b,f){    varc=f(a)+f(b)    console.log("c的值为:"+c);  }  //给add函数传参  add(3,6,sum);// 这里的f相当于为//......
  • 一起学习javascript-函数(2)
    <script>  //变量作用域与解构赋值  functionf1(y){  varx=1;  x=x+2;  console.log(x+y);  console.log(x);  //因为变量x在函数f1中申明,在这里属于局部变量,所以x只能在f1中访问,f1执行完,x就销毁了}f1(2);//为了更直观一点,调用......