首页 > 其他分享 >js中的原型、原型链

js中的原型、原型链

时间:2024-11-01 14:21:52浏览次数:4  
标签:__ .__ proto js Person 原型 prototype

1.对原型、原型链的理解

  在JavaScript中是使用构造函数来新建一个对象的,每一个构造函数的内部都有一个 prototype 属性,它的属性值是一个对象,这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后,在这个对象的内部将包含一个指针,这个指针指向构造函数的 prototype 属性对应的值,在 ES5 中这个指针被称为对象的原型。一般来说不应该能够获取到这个值的,但是现在浏览器中都实现了 __proto__ 属性来访问这个属性,但是最好不要使用这个属性,因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法,可以通过这个方法来获取对象的原型。

  当访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去它的原型对象里找这个属性,这个原型对象又会有自己的原型,于是就这样一直找下去,也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是新建的对象为什么能够使用 toString() 等方法的原因。

特点:JavaScript 对象是通过引用来传递的,创建的每个新对象实体中并没有一份属于自己的原型副本。当修改原型时,与之相关的对象也会继承这一改变。

2.原型重写、修改

function Person(name) {
    this.name = name
}
// 修改原型
Person.prototype.getName = function() {}
var p = new Person('hello')
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // true
// 重写原型
Person.prototype = {
    getName: function() {}
}
var p = new Person('hello')
console.log(p.__proto__ === Person.prototype)        // true
console.log(p.__proto__ === p.constructor.prototype) // false

可以看到修改原型的时候p的构造函数不是指向Person了,因为直接给Person的原型对象直接用对象赋值时,它的构造函数指向的了根构造函数Object,所以这时候p.constructor === Object ,而不是p.constructor === Person要想成立,就要用constructor指回来:

Person.prototype = {
    getName: function() {}
}
var p = new Person('hello')
p.constructor = Person
console.log(p.__proto__ === Person.prototype)        // true
console.log(p.__proto__ === p.constructor.prototype) // true

3.原型链指向

p.__proto__  // Person.prototype
Person.prototype.__proto__  // Object.prototype
p.__proto__.__proto__ //Object.prototype
p.__proto__.constructor.prototype.__proto__ // Object.prototype
Person.prototype.constructor.prototype.__proto__ // Object.prototype
p1.__proto__.constructor // Person 原型的构造指向构造函数本身
Person.prototype.constructor  // Person 

4.原型链的终点是什么?如何打印出原型链的终点?

由于Object是构造函数,原型链终点是Object.prototype.__proto__,而Object.prototype.__proto__=== null // true,所以,原型链的终点是null。原型链上的所有原型都是对象,所有的对象最终都是由Object构造的,而Object.prototype的下一级是Object.prototype.__proto__

5.如何获得对象非原型链上的属性?

使用后hasOwnProperty()方法来判断属性是否属于原型链的属性:

function iterate(obj){
   var res=[];
   for(var key in obj){
        if(obj.hasOwnProperty(key))
           res.push(key+': '+obj[key]);
   }
   return res;
} 

hasOwnProperty的使用方法

 

标签:__,.__,proto,js,Person,原型,prototype
From: https://www.cnblogs.com/LylePark/p/18520078

相关文章

  • Nuxt.js 应用中的 components:extend 事件钩子详解
    title:Nuxt.js应用中的components:extend事件钩子详解date:2024/11/1updated:2024/11/1author:cmdragonexcerpt:components:extend是Nuxt.js中的一个生命周期钩子,允许开发者扩展新的组件到项目中。通过这个钩子,开发者可以动态地添加额外的组件,从而增强项目的功能......
  • 问题:开发过程中出现很多.js或者.js.map
    问题如图:开发过程中,莫名出现与自己创建的.ets文件同名称的.js和.map文件 问题原因:编译/预览过程产生的缓存文件 解决办法:1、下载插件https://plugins.jetbrains.com/plugin/23192-arkcompilersupport/versions  2、使用插件左上角DevEcoStudio->Preferences......
  • 界面控件DevExpress JS & ASP.NET Core v24.1亮点 - 支持Angular 18
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NETCore,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NETCore或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中......
  • 介绍使用@reduxjs/toolkit工具包发送异步请求最简便的方式
     1、安装@reduxjs/toolkit工具包pnpmi @reduxjs/toolkitreact-redux2、在src文件夹下新建store文件夹3、在store文件夹下新建index.js文件作为store的入口文件,其次再新建homeReducer.js文件4、homeReducer.js文件中写入以下代码//从@reduxjs/toolkit库中导入crea......
  • 推荐一个在react项目中为元素添加样式的第三方库(styled-components)(css in js方案)
    1、安装插件pnpm      pnpmistyled-components npm      npminstall styled-componentsyarn        yarn add styled-components2、创建一个js文件用于写样式(模板字符串写法)(1)以App.jsx组件为例,创建一个style.js样式文件,创建组件并暴露//......
  • 响应式项目(RxJS+Vue.js+Spring)大决战(6):用户登录(后端服务模块)
    书接上篇:响应式项目(RxJS+Vue.js+Spring)大决战(5):主页的实现(前端视图模块)        6用户登录6.1功能需求及界面设计        用户登录模块用于学生和教师的日常登录处理,功能需求主要包括:(1)构建用户登录主界面;(2)实现登录业务处理;(3)登录成功后,生成JWT令牌以备其他功......
  • C#读取Json配置文件
    1、安装NuGet包:Newtonsoft.Json2、新建Confgi.json{"K-Fins":-1,"K-Zs":0.2,}3、在Models文件中新建AppConfig.cs和ConfigManager.cspublicclassAppConfig{publicdoubleKFins{get;set;}publicdoublekZs{get;s......
  • java ssm 高校研招信息及专业信息系统 研究生招生信息 源码 jsp
    一、项目简介本项目是一套基于SSM的高校研招信息及专业信息系统,主要针对计算机相关专业的和需要项目实战练习的Java学习者。包含:项目源码、数据库脚本、软件工具等。项目都经过严格调试,确保可以运行!二、技术实现​后端技术:Spring、SpringMVC、MyBatis前端技术:JSP、HTM......
  • C# serialize big collection via NewtonSoft.Json
    System.OutOfMemoryExceptionHResult=0x8007000EMessage=Exceptionoftype'System.OutOfMemoryException'wasthrown.Source=mscorlibStackTrace:atSystem.Text.StringBuilder.ToString()atSystem.IO.StringWriter.ToString()atNewto......
  • nextjs 实战开发1 Mercury 二级域名分发系统| 曲速引擎 Warp Drive
    开发目标开发一个免费的二级域名分发系统创建项目root@ubuntu:~/dev-nextjs/mercury_frontend#pnpmcreatenext-app@latest.版本:pnpm-v9.12.2版本:node-vv20.16.0版本:next15.0.2为了开发方便,我们要将脚手架的package.json进行修改,nextdev-H0.0.0.0-p80,这样当我们运......