浅谈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日

相关文章

  • ASP.NET登出系统并清除Cookie

    ASP.NET提供了一种简便的方法来登出系统并清空Cookie。以下是实现此目的的步骤: 1. 注销用户 要注销用户并清除Cookie,我们需要使用FormsAuthentication.SignOut()方法。代码示例如下: protected void btnLogout_Click(object sender, EventArgs e) { Forms…

    JavaScript 2023年6月11日
    00
  • JavaScript中立即执行函数实例详解

    JavaScript中的立即执行函数是指在定义后立即执行的函数,该函数执行后,返回值即被抛弃,仅保留函数内部的执行结果,不会对全局环境造成污染。本文将详细讲解JavaScript中立即执行函数的各个方面,包括基本语法、应用示例以及优缺点等。 基本语法 JavaScript中的立即执行函数需要使用一对匿名函数进行定义,但为了避免匿名函数对全局环境造成影响,并使…

    JavaScript 2023年5月27日
    00
  • 放弃 console.log 吧!用 Debugger 你能读懂各种源码

    很多同学不知道为什么要用 debugger 来调试,console.log 不行么? 还有,会用 debugger 了,还是有很多代码看不懂,如何调试复杂源码呢? 这篇文章就来讲一下为什么要用这些调试工具: console.log vs Debugger 相信绝大多数同学使用 console.log 调试的,把想看的变量值打印在控制台。 这样能满足需求,但是…

    JavaScript 2023年4月17日
    00
  • SpringMVC结合ajaxfileupload实现文件无刷新上传代码

    下面就来详细讲解一下“SpringMVC结合ajaxfileupload实现文件无刷新上传代码”的完整攻略: 准备工作 在进行具体的代码实现前,我们需要准备以下的开发环境和配置: 安装Maven; 在pom.xml文件中添加相关的依赖项; 创建SpringMVC项目; 配置SpringMVC拦截器和控制器; 引入ajaxfileupload插件。 代码实现 …

    JavaScript 2023年6月11日
    00
  • javascript模拟C#格式化字符串

    接下来我将为你讲解javascript模拟C#格式化字符串的攻略。 首先,我们需要了解C#格式化字符串的语法,它使用了一种特殊的符号来实现占位符的替换。在C#中,占位符由一对花括号 {} 构成,占位符中可以指定参数的索引,以及可选的格式化选项。具体语法如下: string.Format("{0}的年龄是{1}岁。", name, age)…

    JavaScript 2023年5月28日
    00
  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    详解vite+ts快速搭建vue3项目以及介绍相关特性 概述 在本篇教程中,我们将详细讲解使用vite和typescript快速搭建Vue3项目的步骤,并介绍Vue3的相关特性。 准备工作 在开始之前,需要确保你已经安装了node.js和npm包管理器。如果你没安装,可以前往官网下载安装程序。 创建项目 步骤如下:1. 打开终端,进入你想要创建项目的目录。2…

    JavaScript 2023年6月11日
    00
  • JavaScript 过滤关键字

    下面是关于“JavaScript 过滤关键字”的完整攻略。 什么是JavaScript过滤关键字? JavaScript过滤关键字是指通过编程技术对指定的文本进行匹配,过滤掉所包含的不允许出现的关键字,通常用于过滤用户提交的数据,防止网站受到攻击或者输入非法数据。 如何实现JavaScript过滤关键字? 1.使用JavaScript的字符串方法 JavaS…

    JavaScript 2023年5月28日
    00
  • JavaScript获取URL汇总

    我将为你详细讲解如何在JavaScript中获取URL。 一、获取当前页面URL 要获取当前页面的URL,在JavaScript中可以使用window.location.href属性。window.location对象包含很多元素,如协议(http、https等)、主机名、端口、路径和查询字符串等。使用window.location.href属性可以获取完整…

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