浅谈javascript中的prototype和__proto__的理解

浅谈Javascript中的prototype和__proto__的理解

Javascript中有两个与对象原型相关的概念——prototype__proto__,它们在原型继承和对象属性访问时作用重要。下面我们详细讲解它们的理解。

1. prototype

prototype是一个对象,它存在于每一个函数(function)中。当我们使用new关键字来调用函数时,prototype对象中的属性和方法会被加入到新生成的对象中。

示例一:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.getFullName = function() {
  return this.firstName + ' ' + this.lastName;
}

var person1 = new Person('Alice', 'Smith');
console.log(person1.getFullName()); // Alice Smith

在以上示例中,我们定义了一个Person函数,并给它的prototype对象添加了一个getFullName方法,接着我们使用new关键字调用Person函数,并将生成的对象存放在person1变量中。我们可以通过person1.getFullName()访问getFullName方法,并得到其返回值。

2. __proto__

__proto__是一个对象内置的属性,它指向该对象的构造函数(constructor)的prototype对象。当我们访问一个对象的属性时,首先查找对象本身是否拥有该属性,如果没有就会一级一级向上查找其构造函数的prototype对象。

示例二:

function Dog(age) {
  this.age = age;
}

Dog.prototype.bark = function() {
  console.log('wang!');
}

var d = new Dog(2);
console.log(d.age); // 2
console.log(d.bark); // function()...
console.log(d.__proto__ === Dog.prototype); // true
console.log(d.__proto__.__proto__ === Object.prototype); // true

在以上示例中,我们定义了一个Dog构造函数,给它的prototype对象添加了一个bark方法,并使用new关键字来调用生成d对象。接着我们访问d对象的age属性和bark方法,发现这两个属性和方法都是存在于Dog构造函数的prototype对象上的。最后我们比较d.__proto__是否指向Dog.prototype对象,以及d.__proto__.__proto__是否指向Object.prototype对象,结果都为true

结论

prototype是函数(function)对象独有的属性,它的作用是添加公共属性和方法,以用于所有通过该函数生成的对象。

__proto__是每个对象独有的属性,它的作用是指向该对象构造函数的prototype对象,以支持原型链继承。

在实际应用中,我们可以通过prototype来定义构造函数的公共属性和方法,也可以使用__proto__来实现对象之间的属性和方法的继承。

以上就是Javascript中prototype__proto__的基本知识点及应用教程。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:浅谈javascript中的prototype和__proto__的理解 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JS实现保留n位小数的四舍五入问题示例

    下面是“JS实现保留n位小数的四舍五入问题”的完整攻略。 问题描述 在使用JavaScript进行数值处理时,经常需要保留小数位数。在保留小数位数的同时,可能还需要进行四舍五入,以保证结果更为准确和精确。本文将介绍如何使用JavaScript实现保留n位小数的四舍五入操作。 解决方法 方法一:使用toFixed()方法 JavaScript提供了toFixe…

    JavaScript 2023年5月28日
    00
  • JavaScript重复元素处理方法分析【统计个数、计算、去重复等】

    JavaScript重复元素处理方法分析【统计个数、计算、去重复等】 在JavaScript中,处理重复元素是常见的需求,本篇文章将分析几种处理重复元素的方法,包括统计个数、计算、去重复等。 统计个数 统计重复元素的个数是最常见的需求,以下是一些实现方法: 方法1:for循环+计数器 let arr = ["apple", "b…

    JavaScript 2023年5月28日
    00
  • javascript调试之DOM断点调试法使用技巧分享

    JavaScript调试之DOM断点调试法使用技巧分享 什么是DOM断点调试法 DOM断点调试法是一种网页调试方法,主要利用断点调试DOM元素的方式,来定位和解决JavaScript的问题。当页面效果不符合预期,或者页面崩溃、卡死等情况出现时,可以使用DOM断点调试法,找到问题所在,快速解决问题。 如何使用DOM断点调试法 步骤一:定位问题 首先,根据报错信…

    JavaScript 2023年6月10日
    00
  • 原生js实现星星闪烁效果

    下面是“原生js实现星星闪烁效果”的完整攻略。 1. 实现思路 星星的闪烁效果可以通过控制星星的透明度来实现。具体来说,我们可以通过逐渐改变星星的透明度让星星出现或消失,从而达到闪烁的效果。 2. 实现步骤 2.1 创建星星 首先,我们需要先创建星星的元素,可以使用canvas或者div来实现。 2.2 实现闪烁效果 为了实现闪烁效果,我们需要按照一定的时间…

    JavaScript 2023年6月10日
    00
  • JavaScript的removeChild()函数用法详解

    JavaScript的removeChild()函数用法详解 什么是removeChild()函数? 在JavaScript中,使用removeChild()函数可以删除指定的子节点。 removeChild()函数的用法 要使用removeChild()函数,需要先找到要删除的节点,然后将其作为参数传递给removeChild()函数。例如: var el…

    JavaScript 2023年6月10日
    00
  • 详解Go-JWT-RESTful身份认证教程

    详解Go-JWT-RESTful身份认证教程 介绍 本文将详细介绍如何使用Go语言实现一套基于JWT(JSON Web Token)的RESTful身份认证系统。RESTful是一种基于HTTP协议、符合REST原则的接口设计风格,使用JWT进行身份认证和授权可以轻松实现API的状态无关性和安全性。 实现步骤 生成JWT Token 生成JWT Token是…

    JavaScript 2023年6月11日
    00
  • Javascript Global eval() 函数

    以下是关于JavaScript Global对象中eval()函数的完整攻略,包括两个示例说明。 JavaScript Global对象中的eval()函数 JavaScript Global对象中的eval()函数用于将一个字符串作为JavaScript代码进行执行。eval()函数可以将一个字符串解析为JavaScript代码,并执行该代码。eval()…

    JavaScript 2023年5月11日
    00
  • JavaScript 实现基础 正则表达式

    JavaScript 实现基础正则表达式是一个非常重要的技能,在 JavaScript 中,我们可以使用正则表达式来处理文本和字符串,这种技能在前端开发中必不可少。 下面是实现基础正则表达式的完整攻略: 1. 创建一个正则表达式 在 JavaScript 中创建一个正则表达式有两种方法: 使用正则字面量(Regular Expression Literal)…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部