JavaScript ES6 类和对象 简单记录
一
/*
1.在ES6之前如果定义一个类?
通过构造函数来定义一个类
*/
function Person(myName, myAge) {
// 实例属性
// this.name = "lnj";
// this.age = 34;
this.name = myName;
this.age = myAge;
// 实例方法
this.say = function () {
console.log(this.name, this.age);
}
// 静态属性
Person.num = 666;
// 静态方法
Person.run = function () {
console.log("run");
}
}
// let p = new Person();
let p = new Person("zs", 18);
p.say();
console.log(Person.num);
Person.run();
/*
2.从ES6开始系统提供了一个名称叫做class的关键字, 这个关键字就是专门用于定义类的
*/
class Person{
// 当我们通过new创建对象的时候, 系统会自动调用constructor
// constructor我们称之为构造函数
constructor(myName, myAge){
this.name = myName;
this.age = myAge;
}
// 实例属性
// name = "lnj";
// age = 34;
// 实例方法
say(){
console.log(this.name, this.age);
}
// 静态属性
static num = 666;
// 静态方法
static run() {
console.log("run");
}
}
// let p = new Person();
let p = new Person("zs", 18);
p.say();
console.log(Person.num);
Person.run();
需要注意的地方：
1
class Person{
// 以下定义"实例属性"的方式并不是ES6正式版标准中的写法, 大部分的浏览器不支持
// 在ES6标准中添加实例属性都需要在constructor中添加
// 实例属性
// name = "lnj";
// age = 34;
constructor(){
this.name = "lnj";
this.age = 34;
}
// 实例方法
say(){
console.log(this.name, this.age);
}
}
let p = new Person();
console.log(p);
2
class Person{
// 以下定义"静态属性"的方式并不是ES6正式版标准中的写法, 大部分的浏览器不支持
// 在ES标准中static只支持定义静态方法不支持定义静态变量
// 静态属性
// static num = 666;
// 静态方法
static run() {
console.log("run");
}
}
Person.num = 666;
let p = new Person();
console.log(p);
二
function Person(myName, myAge) {
// 实例属性
this.name = myName;
this.age = myAge;
// 实例方法
this.hi = function () {
console.log("hi");
}
}
// 原型上的方法
Person.prototype.say = function () {
console.log(this.name, this.age);
}
let p = new Person("lnj", 34);
console.log(p);
class Person{
constructor(myName, myAge){
this.name = myName;
this.age = myAge;
//构造函数里面添加的方法会添加到 对象本身
this.hi = function () {
console.log("hi");
}
}
//在类里面添加的方法会加到原型对象中
say(){
console.log("hi");
}
}
let p = new Person("lnj", 34);
console.log(p);
四
注意点:
如果通过class定义类, 那么不能自定义这个类的原型对象
如果想将属性和方法保存到原型中, 只能动态给原型对象添加属性和方法
function Person(myName, myAge) {
// 实例属性
this.name = myName;
this.age = myAge;
// 实例方法
this.hi = function () {
console.log("hi");
}
}
// 原型上的方法
// Person.prototype.type = "人";
// Person.prototype.say = function () {
// console.log(this.name, this.age);
// };
//function方式定义的构造函数可以修改 原型对象
Person.prototype = {
constructor: Person,
type: "人",
say: function () {
console.log(this.name, this.age);
}
};
class Person{
constructor(myName, myAge){
this.name = myName;
this.age = myAge;
this.hi = function () {
console.log("hi");
}
}
run(){
console.log("run");
}
}
// Person.prototype.type = "人";
// Person.prototype.say = function () {
// console.log(this.name, this.age);
// };
let obj = {
constructor: Person,
type: "人",
say: function () {
console.log(this.name, this.age);
}
};
//修改对象原型无效
Person.prototype = obj;
let p = new Person("lnj", 34);
console.log(p);
五 继承
ES6之前的继承
1.在子类中通过call/apply方法借助父类的构造函数
2.将子类的原型对象设置为父类的实例对象
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
}
Person.prototype.say = function () {
console.log(this.name, this.age);
}
function Student(myName, myAge, myScore) {
// 1.在子类中通过call/apply方法借助父类的构造函数
Person.call(this, myName, myAge);
this.score = myScore;
this.study = function () {
console.log("day day up");
}
}
// 2.将子类的原型对象设置为父类的实例对象
Student.prototype = new Person();
Student.prototype.constructor = Student;
let stu = new Student("zs", 18, 99);
stu.say();
1.在ES6中如何继承
1.1在子类后面添加extends并指定父类的名称
1.2在子类的constructor构造函数中通过super方法借助父类的构造函数
class Person{
constructor(myName, myAge){
// this = stu;
this.name = myName; // stu.name = myName;
this.age = myAge; // stu.age = myAge;
}
say(){
console.log(this.name, this.age);
}
}
/*
1.在ES6中如何继承
1.1在子类后面添加extends并指定父类的名称
1.2在子类的constructor构造函数中通过super方法借助父类的构造函数
*/
// 以下代码的含义: 告诉浏览器将来Student这个类需要继承于Person这个类
class Student extends Person{
constructor(myName, myAge, myScore){
// 1.在子类中通过call/apply方法借助父类的构造函数
// Person.call(this, myName, myAge);
super(myName, myAge);
this.score = myScore;
}
study(){
console.log("day day up");
}
}
let stu = new Student("zs", 18, 98);
stu.say();
六 获取对象类型
let obj = new Object();
console.log(typeof obj); // object let arr = new Array();
/*
* 这样的打印会是object，这是因为 在所有构造函数中，内部其实会新建一个Object对象，然后赋值给this
* */
console.log(typeof arr); // object
console.log(arr.constructor.name); // Array function Person() {
// let obj = new Object();
// let this = obj;
this.name = "lnj";
this.age = 34;
this.say = function () {
console.log(this.name, this.age);
}
// return this;
}
let p = new Person();
// console.log(typeof p); // object
console.log(p.constructor.name); // Person
七 instanceof 关键字
1.什么是instanceof关键字?
instanceof用于判断 "对象" 是否是指定构造函数的 "实例"
2.instanceof注意点
只要 构造函数的原型对象出现在实例对象的原型链中都会返回true
class Person{
name = "lnj";
}
let p = new Person();
console.log(p instanceof Person); // true
class Cat{
name = "mm";
}
let c = new Cat();
console.log(c instanceof Person); // false
function Person(myName) {
this.name = myName;
}
function Student(myName, myScore) {
Person.call(this, myName);
this.score = myScore;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
let stu = new Student();
/*
* 返回true的原因为 Person的原型对象出现在了stu的原型链上
* */
console.log(stu instanceof Person); // true
八 isPrototypeOf
1.什么是isPrototypeOf属性
isPrototypeOf用于判断 一个对象是否是另一个对象的原型
2.isPrototypeOf注意点
2.1只要调用者在传入对象的原型链上都会返回true
class Person{
name = "lnj";
}
let p = new Person();
console.log(Person.prototype.isPrototypeOf(p)); // true
class Cat{
name = "mm";
}
console.log(Cat.prototype.isPrototypeOf(p)); // false
function Person(myName) {
this.name = myName;
}
function Student(myName, myScore) {
Person.call(this, myName);
this.score = myScore;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
let stu = new Student();
console.log(Person.prototype.isPrototypeOf(stu)); // true
八 判断某一个对象是否拥有某一个属性
// 需求: 判断某一个对象是否拥有某一个属性
class Person{
name = null;
age = 0;
}
Person.prototype.height = 0; let p = new Person();
// in的特点: 只要类中或者原型对象中有, 就会返回true
console.log("name" in p); // true
console.log("width" in p); // false
console.log("height" in p); // true // 需求: 判断某一个对象自身是否拥有某一个属性
let p = new Person();
// 特点: 只会去类中查找有没有, 不会去原型对象中查找
console.log(p.hasOwnProperty("name")); // true
console.log(p.hasOwnProperty("height")); // false
九 深拷贝和浅拷贝
1.什么是深拷贝什么是浅拷贝?
1.1深拷贝
修改新变量的值不会影响原有变量的值
默认情况下基本数据类型都是深拷贝
1.1浅拷贝
修改新变量的值会影响原有的变量的值
默认情况下引用类型都是浅拷贝
万能深拷贝方法
class Person{
name = "lnj";
cat = {
age : 3
};
scores = [1, 3, 5];
}
let p1 = new Person();
let p2 = new Object();
/*
// p2.name = p1.name;
// p2.name = "zs";
// console.log(p1.name);
// console.log(p2.name);
p2.cat = p1.cat;
p2.cat.age = 666;
console.log(p1.cat.age);
console.log(p2.cat.age);
*/
depCopy(p2, p1);
// console.log(p2);
p2.cat.age = 666;
console.log(p1.cat.age);
console.log(p2.cat.age);
function depCopy(target, source) {
// 1.通过遍历拿到source中所有的属性
for(let key in source){
// console.log(key);
// 2.取出当前遍历到的属性对应的取值
let sourceValue = source[key];
// console.log(sourceValue);
// 3.判断当前的取值是否是引用数据类型
if(sourceValue instanceof Object){
// console.log(sourceValue.constructor);
// console.log(new sourceValue.constructor);
let subTarget = new sourceValue.constructor;
target[key] = subTarget;
depCopy(subTarget, sourceValue);
}else{
target[key] = sourceValue;
}
}
}
JavaScript ES6 类和对象 简单记录的更多相关文章
- Javascript创建类和对象
现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = ...
- 扩展javascript扩展(类，对象，原型)
扩展javascript扩展(类,对象,原型)
- 我所了解的关于JavaScript定义类和对象的几种方式
原文:http://www.cnblogs.com/hongru/archive/2010/11/08/1871359.html 在说这个话题之前,我想先说几句题外话:最近偶然碰到有朋友问我“hois ...
- JavaScript定义类与对象的一些方法
最近偶然碰到有朋友问我"hoisting"的问题.即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的.可以看看这个例子: 1 var a = 'global'; 2 (fu ...
- javascript：类数组 -- 对象
在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 类数组:本质是一个对象,只是这个 对象 的属性有点特殊,模拟出数组的一些特性. 一般来说,如果我们有一个 ...
- 【JavaScript】类继承(对象冒充)和原型继承__深入理解原型和原型链
JavaScript里的继承方式在很多书上分了很多类型和实现方式,大体上就是两种:类继承(对象冒充)和原型继承. 类继承(对象冒充):在函数内部定义自身的属性的方法,子类继承时,用call或apply ...
- 简述JavaScript的类与对象
JavaScript语言是动态类型的语言,基于对象并由事件驱动.用面向对象的思想来看,它也有类的概念.JavaScript 没有class关键字,就是用function来实现. 1. 实现方式及变量/ ...
- Javascript基础--类与对象(五)
js面向(基于)对象编程1.澄清概念 1.1 js中基于对象 == js 面向对象 1.2 js中没有类class,但是它取了一个新的名字,交原型对象,因此 类 = 原型对象. 2.为什么需要对象? ...
- javascript定义类或对象的方式
本文介绍的几种定义类或对象的方式中,目前使用最广泛的是:混合的构造函数/原型方式.动态原型方式.不要单独使用经典的构造函数或原型方式. 工厂方式 构造器函数 原型方式 混合的构造函数/原型方式 动态原 ...
- scala对象简单记录
object Person { private val eyeNum = 2 def getEyeNum = eyeNum def main(args: Array[String]): Unit = ...
随机推荐
- SpringCloud组件:搭建Eureka服务注册中心,搭建的时候一定要确保springboot和springCloud的版本对应
搭建的时候一定要确保springboot和springCloud的版本对应,不然会报下面的错 查看版本对应得地址:https://start.spring.io/actuator/info 改了对应得 ...
- C# 开源NuGet插件
ExcelDataReader 开源免费,Excel读取插件 GitHub - ExcelDataReader/ExcelDataReader: Lightweight and fast libra ...
- conda pytorch 配置
主要步骤: 0.安装anaconda3(基本没问题) 1.配置清华的源(基本没问题) 2.查看python版本,运行 python3 -V: 查看CUDA版本,运行 nvcc -V 3.如果想用最新版 ...
- 整合jUnit4和jUnit5
整合jUnit4 1.引入依赖 <dependency> <groupId>org.springframework</groupId> <artifactId ...
- MySQL同步部分库注意的问题
同步部分库或部分库表 复制部分库:replicate_do_db 复制排除部分库:replicate_ignore_db 复制部分表:replicate_do_table 复制排除部分表:replic ...
- 2019-2020-1 20199318《Linux内核原理与分析》第十三周作业
<Linux内核原理与分析> 第十三周作业 一.预备知识 缓冲区溢出是指程序试图向缓冲区写入超出预分配固定长度数据的情况.这一漏洞可以被恶意用户利用来改变程序的流控制,甚至执行代码的任意片 ...
- 【剑指Offer】【树】树的子结构
题目:输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) /* struct TreeNode { int val; struct TreeNode *left ...
- python sorted() 多重排序
前言: 最开始是因为看到一道题目, 用一行代码解决[1, 2, 3, 11, 2, 5, 3, 2, 5, 3] 输出[11, 1, 2, 3, 5] 本来想法很简单,先去重后排序 但是遇到一个难点 ...
- CSOL大灾变移植记录
在2019年,我玩u3d把玩了一段时间,并制作了一些Demo,其中包括FPSDemo,RPG动作游戏Demo,一些截图如下: 时间到了2020年5月底,我开始玩之前大学研究过的jMonkeyEngin ...
- linux安装jdk脚本
使用Shell远程给Linux安装JDK #1.下载JDK(不同版本JDK更换链接即可) wget命令下载的文件会在当前目录下,所以如果在下载前最好先 cd 到想把JDK安装的位置,如果没有,可以 ...