JavaScript原型对象和对象原型、原型继承、原型链

1. 原型对象对象原型

<a class=原型对象和对象原型" />

  • 作用: 以前通过构造函数实例化的对象,每个实例化的对象的属性和方法都是独立的,会造成内存浪费。通过prototype对象原型能实现不同实例化对象共享公用的属性和方法,减少内存的使用
  • 定义: 每个构造函数,都自动会有对应的一个prototype原型对象,可以通过prototype原型对象声明公用的属性和方法;而原型对象又有一个constructor属性指向构造函数。prototype原型对象的this都指向实例化的对象
  • 使用: 通过构造函数实例化的对象,都会有一个__proto__对象原型__proto__对象原型也有一个constructor属性指向构造函数;同时__proto__对象原型指向prototype原型对象(由Javascript底层实现),这样可以直接通过实例化的对象访问prototype原型对象的公用的属性和方法。注意: 有的浏览器不是__proto__而是[[prototype]]

使用示例1:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
  <script>
    // 构造函数
    function Star(uname) {
      this.uname = uname
    }

    // 原型对象
    Star.prototype.sing = function () {
      console.log('唱歌')
    }
    console.log(Star.prototype.constructor)   // ƒ Star(uname) {this.uname = uname}

    // 实例化对象
    const lily = new Star('lily')
    const tom = new Star('tom')
    console.log(lily.sing === tom.sing)             // true。减少了内存使用
    console.log(lily.__proto__.constructor)         // ƒ Star(uname) {this.uname = uname}
    console.log(lily.__proto__ === Star.prototype)  // true


  </script>
</body>
</html>

使用示例2。可以声明原型对象prototype为一个对象,同时声明多个共享的属性和方法。但需要通过constructor重新指向构造函数Star,否则指向Object就找不到构造函数Star了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
  <script>
    // 构造函数
    function Star(uname) {
      this.uname = uname
    }

    // 原型对象
    Star.prototype = {
      constructor: Star,    
      sing: function () {
        console.log('唱歌')
      }
    }

  </script>
</body>
</html>

2. 原型继承

可以定义一个父类,然后通过原型继承来继承父类,最后实现子类自有的属性和方法

使用示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
  <script>
    // 父类
    function Person() {
      this.eyes = 2
      this.head = 1
    }

    // 继承父类。然后添加子类独有的方法
    function Woman() {
    }
    Woman.prototype = new Person()
    Woman.prototype.constructor = Woman
    Woman.prototype.baby = function () {
      console.log('生孩子')
    }
  </script>
</body>
</html>

3. 原型链

<a class=原型链" />

  1. 构造函数的prototype原型对象也是一个对象,该对象的__proto__对象原型指向Object构造函数的prototype原型对象
  2. Object构造函数的prototype原型对象也是一个对象,该对象的__proto__对象原型指向null

原型链的查找规则如下。可以使用instanceof运算符,检测构造函数或实例化对象是否出现在某个实例化对象的原型链

  1. 访问一个对象的属性和方法,先查找对象自身
  2. 在查找对象的prototype原型对象
  3. 再查找Object构造函数的原型对象
  4. 如果还查不到,就返回null

示例:

    console.log([1, 2, 3] instanceof Array)   // true
    console.log(Array instanceof Object)      // // true

http://www.niftyadmin.cn/n/5536342.html

相关文章

macOS使用Karabiner-Elements解决罗技鼠标G304连击、单击变双击的故障

记录一下罗技鼠标G304单击变双击的软件解决过程和方案&#xff08;适用于macOS&#xff0c; 如果是Windows&#xff0c;使用AutoHotKey也有类似解决办法、方案&#xff0c;改日提供&#xff09;&#xff1a; 背景&#xff1a;通过罗技Logitech G HUB软件对罗技的游戏鼠标侧键b…

零基础学习MySQL---库的相关操作

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、创建数据库 1.语法 CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specification] .…

Linux修改服务器hostname方法

为了更好的区分服务器的辨识度&#xff1a; 提示&#xff1a;要修改两个文件&#xff0c;单一的修改一个后续怕出现不可预知的问题 修改hostname文件命令如下&#xff1a; seven-71则是我要修改的新hostname名称&#xff0c;下面三条命令&#xff0c;按顺序执行即可 hostnam…

Linux手动安装JDK1.8

1、下载要安装的jdk安装包文件 官网下载地址&#xff1a;https://www.oracle.com/cn/java/technologies/downloads/ 2、上传jdk安装包至要安装服务器 3、在要安装jdk位置使用命令解压安装包 安装路径: /usr/local/java 解压安装包&#xff0c;解压命令 tar -zxvf /install…

相机,手机,行车记录仪及监控视频修复软件: Stellar Repair for Video

天津鸿萌科贸发展有限公司是 Stellar 系列数据恢复软件的授权代理商。 Stellar Repair for Video 是一款强大的工具&#xff0c;用于修复从主流相机品牌&#xff08;如佳能、尼康、索尼&#xff09;、行车记录仪、监控录像机、手机和其他视频设备拍摄的无法访问和损坏的视频。…

【Tools】 Postman 接口测试工具详解

那年夏天我和你躲在 这一大片宁静的海 直到后来我们都还在 对这个世界充满期待 今年冬天你已经不在 我的心空出了一块 很高兴遇见你 让我终究明白 回忆比真实精彩 &#x1f3b5; 王心凌《那年夏天宁静的海》 在现代软件开发中&#xff0c;API&#xff08;…

微信小程序/uniapp:class和style不生效的问题

非常重要&#xff1a;小程序端不支持 classObject 和 styleObject 语法。 文档&#xff1a;https://uniapp.dcloud.net.cn/tutorial/vue-basics.html#class-与-style-绑定 目录 对象语法数组语法字符串语法computed其他方案 对象语法 <!-- class --> <view class&quo…

Redis【超详细】

Redis 是一个基于内存的key-value结构的数据库 一、redis的安装 1.1、安装步骤 1&#xff09;安装Redis依赖 Redis是基于c语言编写的&#xff0c;因此需要安装对应的gcc环境 yum install -y gcc tcl 2&#xff09;进入/usr/local/src/目录上传并解压安装包 解压&#xf…