重学前端 8 # JavaScript中的原型和类

简介: 重学前端 8 # JavaScript中的原型和类

一、什么是原型?


1.0、定义

原型是指一个词语或一个类型意义的所有典型模型或原形象,是一个类型的组典型特征


1.1、基于类的编程语言

诸如 C++、Java 等流行的编程语言是使用类的方式来描述对象,基于类的编程提倡使用一个关注分类和类之间关系开发模型。


1.2、基于原型的编程语言

如 JavaScript 编程语言是利用原型来描述对象,基于原型的编程看起来更为提倡程序员去关注一系列对象实例的行为,而后才去关心如何将这些对象,划分到最近的使用方式相似的原型对象,而不是将它们分成类。


1.3、原型系统的“复制操作”有两种实现思路

  • 一个是并不真的去复制一个原型对象,而是使得新对象持有一个原型的引用
  • 另一个是切实地复制对象,从此两个对象再无关联。


javaScript选择了第一种方式。




二、JavaScript 的原型


2.0、原型系统的两条概括

  • 如果所有对象都有私有字段 [[prototype]],就是对象的原型
  • 读一个属性,如果对象本身没有,则会继续访问对象的原型,直到原型为空或者找到为止。



2.1、三个内置函数


可以利用下面三个方法,更直接地访问操纵原型,来实现抽象和复用。


   Object.create 根据指定的原型创建新对象,原型可以是 null

   Object.getPrototypeOf 获得一个对象的原型

   Object.setPrototypeOf 设置一个对象的原型


winter举了用原型来抽象猫和虎的例子:

var cat = {
    say() {
        console.log("meow~");
    },
    jump() {
        console.log("jump");
    }
}
var tiger = Object.create(cat,  {
    say: {
        writable: true,
        configurable: true,
        enumerable: true,
        value: function(){
            console.log("roar!");
        }
    }
})
var anotherCat = Object.create(cat);
anotherCat.say(); // meow~
var anotherTiger = Object.create(tiger);
anotherTiger.say(); // roar!



三、早期版本中的类与原型


3.0、“类”的定义是一个私有属性 [[class]]


所有具有内置 class 属性的对象:(ES3和之前版本)

var o = new Object;
var n = new Number;
var s = new String;
var b = new Boolean;
var d = new Date;
var arg = function(){ return arguments }();
var r = new RegExp;
var f = new Function;
var arr = new Array;
var e = new Error;
console.log(
    [o, n, s, b, d, arg, r, f, arr, e].map(v =>   Object.prototype.toString.call(v)
  )
)


语言使用者唯一可以访问 [[class]] 属性的方式是 Object.prototype.toString。



3.1、[[class]] 私有属性被 Symbol.toStringTag 代替


可以查看MDN文档Symbol.toStringTag以及Object.prototype.toString的介绍:(ES5开始)

var o = { [Symbol.toStringTag]: "MyObject" }
console.log(o + ""); // [object MyObject]


上面这段代码创建了一个新对象,并且给它唯一的一个属性 Symbol.toStringTag,用字符串加法触发了Object.prototype.toString 的调用,发现这个属性最终对 Object.prototype.toString 的结果产生了影响。



3.2、new运算做了什么?


  • 1、以构造器的 prototype 属性(注意与私有字段 [[prototype]] 的区分)为原型,创建新对象
  • 2、将 this 和调用参数传给构造器,执行
  • 3、如果构造器返回的是对象,则返回,否则返回第一步创建的对象。


用构造器模拟类的两种方法:

// 1、在构造器中修改 this,给 this 添加属性
function c1() {
    this.p1 = 1;
    this.p2 = function(){
        console.log(this.p1);
    }
}
var o1 = new c1;
o1.p2(); // 1
// 2、修改构造器的 prototype 属性指向的对象,它是从这个构造器构造出来的所有对象的原型。
function c2() {
}
c2.prototype.p1 = 1;
c2.prototype.p2 = function() {
    console.log(this.p1);
}
var o2 = new c2;
o2.p2(); // 1



四、ES6 中的类


4.0、类的基本写法

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}


4.1、类的继承能力

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}
class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }
  speak() {
    console.log(this.name + ' barks.');
  }
}
let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

上面代码调用子类的 speak 方法获取了父类的 name。如果对于class还想了解更多,可以查看MDN文档Classes部分。

目录
相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
35 1
JavaScript中的原型 保姆级文章一文搞懂
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
52 5
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
80 1
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
56 4
|
2月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
108 2
|
2月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
61 4
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
175 1
|
2月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
323 0