重学前端 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部分。

目录
相关文章
|
10月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
535 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
9月前
|
JavaScript 前端开发 API
|
9月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
338 8
|
10月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
8684 23
|
11月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
315 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
212 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
470 5
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
511 1
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
315 5
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试

热门文章

最新文章