Js原型链与类
JS 原型
2023-06-13 09:16:40 时间
理解原型链与类有利于我们对代码的封装与简化
# JS原型链理论
# 1、函数与对象的关系
- 函数是对象,对象都是通过函数创建的。
- 函数与对象并不是简单的包含与被包含的关系。
# 2、原型的类别
- 显示原型:
prototype
,是每个函数function独有的属性。 - 隐式原型:
__proto__
,是每个对象都具有的属性。
# 3、原型和原型链
- 原型:一个函数可以看成一个类,原型是所有类都有的一个属性,原型的作用就是给这个类的一个对象都添加一个统一的方法。
- 原型链:每个对象都有一个__proto__,它指向它的prototype原型对象; 它的prototype原型对象又有一个__proto__指向它的prototype原型对象, 就这样层层向上直到最终找到顶级对象Object的prototype,这个查询路径就是原型链。
# 4、JS两个概念
- Function 是JavaScript 里最顶层的构造器,它构造了系统中的所有对象,包括定义对象、系统内置对象、甚至包括它自己。
- Object 是最顶层的对象, 所有对象都是继承 Object 的原型, Object 也是被 Function 构造出来的。(Object.prototype)
# JS类的理论
# 1、创建类
- 类是用于创建对象的模板。
- 使用 class 关键字来创建一个类,类体在一对大括号 {} 中,我们可以在大括号 {} 中定义类成员的位置,如方法或构造函数。 每个类中包含了一个特殊的方法 constructor(),它是类的构造函数,这种方法用于创建和初始化一个由 class 创建的对象。
- 创建对象时会自动调用构造函数方法 constructor()。
# 2、类表达式
- 类表达式是定义类的另一种方法,类表达式可以命名或不命名。
- 命名类表达式的名称是该类体的局部名称。
// 未命名/匿名类
let test = class {
constructor(name, url) {
this.name = name;
this.url = url;
}
};
console.log(test.name);
// output: "test"
// 命名类
let test = class test2 {
constructor(name, url) {
this.name = name;
this.url = url;
}
};
console.log(test.name);
// 输出: "test2"
# 3、类的方法
构造方法
- 构造方法是一种特殊的方法:
- 构造方法名为 constructor()。
- 构造方法在创建新对象时会自动执行。
- 构造方法用于初始化对象属性。
- 如果不定义构造方法,JavaScript 会自动添加一个空的构造方法。
类方法的使用
- 我们使用关键字 class 创建一个类,可以添加一个 constructor() 方法,然后添加任意数量的方法。
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
- 通过new关键词来实例,向类的方法发送参数
class timer {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let t = new timer("张三", 2000);
console.log('张三' + t.age(year) + '岁了。')//张三22岁了。
# 4、类的总结
- 类中的构造器不是必须写的,要对实例进行一些初始化操作,如添加指定操作时才写。
- 如果A类继承了B类,且A类写了构造器,那么A类的构造器必须调用super。
- 类所定义的方法,都是放在类的原型对象上,供实例去使用。
class person{
constructor(name,age){
this.name = name
this.age = age
}
speak(){
console.log(`我叫${this.name},今年${this.age}岁`)
}
}
class son extends person{
constructor(name,age,job){
super(name,age)
this.job = job
}
speak(){
console.log(`我叫${this.name},今年${this.age}岁,工作是${this.job}`)
}
}
let p1 = new person('张三',20);
let p2 = new person('李四',30);
let s = new son('王五',33,'医生');
p1.speak()
p2.speak()
s.speak()
console.log(p1)
console.log(p2)
相关文章
- js的this、call、apply、bind、继承、原型链
- 【说站】js垃圾回收的场景优化
- JS设计模式之原型模式
- Js原型链容易出错的面试题
- JS面试题-js新增基本数据类型BigInt
- js对象和原型、原型链的关系_2023-03-02
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- 【JS 逆向百例】猿人学系列 web 比赛第二题:js 混淆 - 动态 cookie,详细剖析
- 使用git webhook自动部署代码(PHP,HTML/JS)
- Ratchet:使用 HTML,JS,CSS 创建 iPhone App 原型
- js正则表达式:验证邮箱格式、密码复杂度、手机号码、QQ号码详解编程语言
- JS验证手机号码格式详解编程语言
- JS 判断字符串包含详解编程语言
- js 图片轮播(一)详解编程语言
- 通过JS Array原型扩展更多方法
- 使用JS控制Oracle数据库的更新(js控制oracle更新)
- 使用Oracle和JS开发新一代应用仿真世界(oracle js)
- Redis中的订阅机制及其在JS中的应用(redis 订阅 js)
- 一些有关检查数据的JS代码
- 如何用JS获取带“”字符串的中间值?
- 后缀就扩展名为js的文件是什么文件原创
- JS字符串截取函数实例
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- js获取当前地址JS获取当前URL的示例代码
- 简单选项卡js和jquery制作方法分享
- 禁用Tab键JS代码兼容Firefox和IE