当前位置: 首页 > news >正文

js 类、原型及class

 js   一直允许定义类。ES6新增了相关语法(包括class关键字)让创建类更容易。新语法创建的类和老式的类原理相同。js 的类和基于原型的继承机制与Java等语言中的类和继承机制有着本质区别。

1 类和原型

类意味着一组对象从同一个原型对象继承属性。因此,原型对象是类的核心特征。

用工厂函数创建和初始化该类的新实例:

function range(from, to) {let r = Object.create(range.methods);r.from = from;r.to = to;return r;
}range.methods = {includes(x) {return this.from <= x && x <= this.to;},*[Symbol.iterator]() {for (let x = Math.ceil(this.from); x <= this.to; x++)yield x;},toString() {return "(" + this.from + "..." + this.to + ")";},}let r = range(1,3);
console.log(r.includes(2));
console.log(r + ""); // 调用的是toString()方法
console.log(r); // 打印对象本身,而非调用toString()方法
console.log([...r])

2 类和构造函数

只有函数(不包括箭头函数、生成器函数和异步函数)对象才有prototype属性。

上面定义类的写法非习惯写法,因为它没有定义构造函数。构造函数要使用new关键字调用,会自动创建新对象,因此构造函数本身只需初始化新对象的状态。构造函数调用的关键在于构造函数的prototype属性将被用作新对象的原型。

function Range(from,to) {this.from = from;this.to = to;
}// 原型属性名必须命名为prototype
Range.prototype = {includes(x) {return this.from <= x && x <= this.to;},*[Symbol.iterator]() {for (let x = Math.ceil(this.from); x <= this.to; x++)yield x;},toString() {return "(" + this.from + "..." + this.to + ")";}
}let r = new Range(1,3);
console.log(r.includes(2));
console.log(r + "");
console.log(r)
console.log([...r])

2.1 instanceof

当且仅当两个对象继承同一个原型对象时,它们才是同一个类的实例。instanceof 操作符用于检查某个对象是否是某个特定类的实例。

严格来讲,instanceof操作符并非检查对象是否通过某个构造函数初始化,而是检查对象是否继承了原型。(不一定是直接继承)

let prototype = {}function Person() {}function Animal() {}let p = new Person();console.log( p instanceof Person); // true
console.log( p instanceof Animal); // falsePerson.prototype = prototype
Animal.prototype = prototypelet p2 = new Person()
console.log( p2 instanceof Person); // true
console.log( p2 instanceof Animal); // true

2.2 constructor 属性

prototype属性的值是一个对象,其有一个不可枚举的constructor属性,该属性的值就是prototype所属的函数对象:

let F = function() {};

let p = F.prototype;

let c = p.constructor;

c === F; //true

3 使用class关键字定义类

class关键字是在ES6才引入的。

使用class来定义类:

class Person {constructor(age) {this.age = age;}showAge() {console.log(this.age);}}let p = new Person(12);
p.showAge();let Animal = class {constructor(name) {this.name = name}showName() {console.log(this.name)}
}let a = new Animal("大象");
a.showName()

与函数声明不同,类声明不会“提升”(函数定义就像是会被提升到包含文件或包含函数顶部一样,而类声明不会)。

类声明除了语句到形式外,还有表达式的形式。不过这种形式并不常用:

let Persopn = class { constructor() {} }

3.1 静态方法

在class体中,把static关键字放在方法声明前面可以定义静态方法。静态方法是作为构造函数而非原型的属性定义的。

class Person {static hello() {console.log("hello word")}
}Person.hello(); // hello word
let p = new Person();
p.hello(); // 报错,p.hello is not a function

静态函数必须通过构造函数而非实例调用。

3.2 获取和设置方法

在class 体内,可像对象字面量中一样定义获取方法和设置方法,唯一的区别是类体内的方法后面不加逗号。

class Person {set age(val) {if (val <= 0) throw new TypeError("年龄不能小于0")this.age = val}
}let person = new Person();
person.age = -1
console.log(person.age)

4 子类

ES6之前定义子类的方式是通过原型,ES6则通过extends定义子类。

4.1 子类与原型

function Person() {console.log("Person的构造器")
}Person.prototype = {constructor: Person,showType() {console.log("Person")}
}function Man() {console.log("Man的构造器")
}Man.prototype = Object.create(Person.prototype)
let man = new Man();
man.showType()
console.log(man.constructor)Man.prototype.constructor = Man
console.log(man.constructor)

只有在知道父类实现细节的前提下才可能这样定义子类,健壮的子类化机制应该允许类调用父类的方法和构造函数,在ES6之前,js中没有简单的方法做到这些。

4.2 通过extends和super创建子类

class Person {constructor() {console.log("Person:" + new.target)}
}class Man extends Person {constructor() {super();console.log(this)console.log("Man")}
}class Woman extends Person {constructor() {super();console.log("Woman")}
}let man = new Man();
let woman = new Woman()

注意事项:

1)使用extends关键字定义了一个类,则该类的构造函数必须使用super()调用父类构造器。
    2)在通过super()调用父类构造器之前,不能在构造器中使用this关键字。
    3)new.target引用的是被调用的构造函数。

在实际开发中,并不建议创建很多子类,建议通过“组合”的方式来替代继承。

http://www.lryc.cn/news/143331.html

相关文章:

  • day-30 代码随想录算法训练营 回溯part06
  • txt、pcd、las、ply 格式点云基本的读写和显示 (附 python c++ 代码)
  • k8s节点pod驱逐、污点标记
  • 【项目 计网6】 4.17 TCP三次握手 4.18滑动窗口 4.19TCP四次挥手
  • 茶叶小笔记
  • 安全开发-JS应用NodeJS指南原型链污染Express框架功能实现审计WebPack打包器第三方库JQuery安装使用安全检测
  • Android JNI系列详解之CMake编译工具的使用
  • springboot中关于继承WebMvcConfigurationSupport后自定义的全局Jackson失效解决方法,localdate返回数组问题
  • LeetCode 面试题 02.03. 删除中间节点
  • Redis知识点总结
  • (四)k8s实战-服务发现
  • AxureRP制作静态站点发布互联网,内网穿透实现公网访问
  • [Go版]算法通关村第十四关白银——堆高效解决的经典问题(在数组找第K大的元素、堆排序、合并K个排序链表)
  • 『FastGithub』一款.Net开源的稳定可靠Github加速神器,轻松解决GitHub访问难题
  • 软件开发的201个原则 阅读笔记 第172-201个原则
  • vue 后台管理系统登录 记住密码 功能(Cookies实现)
  • elementUI moment 年月日转时间戳 时间限制
  • 用AI + Milvus Cloud搭建着装搭配推荐系统教程
  • 大数据领域都有什么发展方向
  • NSSCTF——Web题目1
  • VScode中写Verilog时,iverilog语法自动纠错功能不起作用
  • thinkphp6.0 配合shell 脚本 定时任务
  • 18-使用钩子函数判断用户登录权限-登录前缀
  • 关闭win11启动界面搜索推荐
  • 中文乱码处理
  • JAVA坦克大战游戏v3
  • 使用acme,自动续签免费的SSL,无忧http升级https
  • Uniapp笔记(五)uniapp语法4
  • 编写一个yolov5的模型检测,只要运行后,就不结束,只要有文件放入到文件夹中,就去执行读取
  • vscode调试PHP代码