JS中Class类的详解

JS中Class类的详解概述    在ES6中,class(类)作为对象的模板被引入,可以通过class关键字定义类。它可以被看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。    类实际上是个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,类语法有两个组成部分:类表达式和类声明。严格模式    类和模块的内部,默认就是严格模式,所以不需要使用usestrict指定运行模式…

大家好,又见面了,我是你们的朋友全栈君。

概述

    在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。它可以被看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
    类实际上是个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,类语法有两个组成部分:类表达式和类声明。

严格模式

    类和模块的内部,默认就是严格模式,所以不需要使用 use strict 指定运行模式

类的声明

定义一个类的一种方法是使用一个类声明,即用带有class关键字的类名(这里是“Rectangle”)
函数名和实例化构造名相同且大写(非强制)

class Person { 
   
	constructor(x, y) { 
   
    this.x = x
    this.y = y
  }
}

函数声明和类声明之间的一个重要区别是函数声明会提升,类声明不会。需要先进行声明,再去访问,否则会报错

var person= new Person()
class Person { 
   
	constructor(x, y) { 
   
    this.x = x
    this.y = y
  }
}
// Personis not defined

类声明不可以重复

class Person { 
   }
class Person { 
   }
// TypeError Identifier 'Person' has already been declared

类必须使用 new 调用,否则会报错。这是它跟普通构造函数的一个主要区别,就是后者不用 new 也可以执行

class Person { 
   
	constructor(x, y) { 
   
    this.x = x
    this.y = y
  }
}
Person()
// TypeError Class constructor Person cannot be invoked without 'new'

类表达式(类定义)

类表达式可以是被命名的或匿名的

/* 匿名类 */ 
let Person = class { 
   
  constructor(x, y) { 
   
    this.x = x
    this.y = y
  }
}

/* 命名的类 */ 
let Person = class Person { 
   
  constructor(x, y) { 
   
    this.x = x
    this.y = y
  }
}

类的方法

constructor 方法

    constructor 方法是类的默认方法,通过 new 命令生成对象实例时,自动调用该方法(默认返回实例对象 this)。一个类必须有 constructor 方法,如果没有显式定义,一个空的 constructor 方法会被默认添加。一个类只能拥有一个名为 “constructor” 的特殊方法,如果类包含多个 constructor 的方法,则将抛出 一个 SyntaxError 。

class Person { 
   
   constructor(x, y) { 
   
    this.x = x    // 默认返回实例对象 this
    this.y = y
  }
  toString() { 
   
    console.log(this.x + ', ' + this.y)
  }
}

注意:

  1. 在类中声明方法的时候,方法前不加 function 关键字
  2. 方法之间不要用逗号分隔,否则会报错
  3. 类的内部所有定义的方法,都是不可枚举的(non-enumerable)
  4. 一个类中只能拥有一个 constructor 方法

静态方法

    静态方法可以通过类名调用,不能通过实例对象调用,否则会报错

class Person { 
   
    static sum(a, b) { 
   
        console.log(a + b)
    }
}
var p = new Person()
Person.sum(1, 2)  // 3
p.sum(1,2)     // TypeError p.sum is not a function

原型方法

    类的所有方法都定义在类的 prototype 属性上面,在类的实例上面调用方法,其实就是调用原型上的方法
    原型方法可以通过实例对象调用,但不能通过类名调用,会报错

class Person { 
   
	constructor() { 
   
		// 默认返回实例对象 this
	}
    sum() { 
   
    	
    }
    toString() { 
   
    	console.log('123456')
  	}
}
// 给 Person 的原型添加方法
Person.prototype.toVal = function() { 
   
	console.log('I am is toVal')
}

// 等同于
Person.prototype = { 
   
  constructor() { 
   },
  sum() { 
   },
  toString() { 
   }
}

var p = new Person()
p.toString()       // 123456
p.toVal()          // I am is toVal
Person.toString()  // TypeError Person.toStringis not a function
Person.toVal()  // TypeError Person.toVal is not a function

实例方法

    实例方法也可以通过实例对象调用,但同样不能通过类名调用,会报错

class Person { 
   
    constructor() { 
   
        this.sum = function(a, b) { 
   
            console.log(a + b)
        }
    }
}
var p = new Person()
p.sum(1,2)       // 3
Person.sum(1,2)  // TypeError Person.sum is not a function
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/136841.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • acwing-2180. 最长递增子序列问题(最大流+拆点+最长上升子序列)

    acwing-2180. 最长递增子序列问题(最大流+拆点+最长上升子序列)给定正整数序列 x1,⋯,xn。计算其最长递增子序列的长度 s。计算从给定的序列中最多可取出多少个长度为 s 的递增子序列。(给定序列中的每个元素最多只能被取出使用一次)如果允许在取出的序列中多次使用 x1 和 xn,则从给定序列中最多可取出多少个长度为 s 的递增子序列。注意:递增指非严格递增。输入格式第 1 行有 1 个正整数 n,表示给定序列的长度。接下来的 1 行有 n 个正整数 x1,⋯,xn。输出格式第 1 行输出最长递增子序列的长度 s。第 2 行输出可取出的长度为 s 的

    2022年8月9日
    8
  • CDO学习1 CDO简介[通俗易懂]

    CDO学习1 CDO简介[通俗易懂]参考自如下网站http://www.ceda.ac.uk/static/media/uploads/ncas-reading-2015/cdo.pdf介绍一个有几百种操作符的单独命令CDO受N

    2022年8月1日
    4
  • 跨域与跨域访问_如何实现跨域访问

    跨域与跨域访问_如何实现跨域访问什么是跨域跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com页面去请求www.google.com的资源。跨域的严格一点的定义是:只要协议,域名,端口有任何一个的不同,就被当作是跨域为什么浏览器要限制跨域访问呢?原因就是安全问题:如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题

    2022年10月1日
    4
  • iOS二维码扫描

    iOS二维码扫描导入AVFoundation库,并将它加入.pch预编译文件给相机预览控制器DTCameraPreviewController添加四个私有成员,获取AVFoundation的“终端”、“输入”、“输出”、“管理员”对象:@implementationDTCameraPreviewController{AVCaptureDevice*_camera;AVCaptureDevice

    2022年6月24日
    25
  • settings官方网站_java_home environment variable

    settings官方网站_java_home environment variablesetting —> php,选择php版本,并点击…,选择到php.exe进入到appserv底下找到php.ini文件,查找date.timezone,去掉前面的;号,添加”Asia/Shanghai”重启appserv环境,就是重启下apache 和 mysql服务发现依然失败后面重启电脑就可以了哈哈哈哈哈哈哈哈…

    2022年8月18日
    7
  • VMware Tools安装步骤(windows10)[通俗易懂]

    VMware Tools安装步骤(windows10)[通俗易懂]VMwareTools是VMware虚拟机中的一个工具,其主要作用是能够使鼠标在虚拟机和主机之前流畅地切换,并且能够共享剪贴板。我们可以通过VMwareTools将主机的文件复制粘贴到虚拟机。同时使得Ubuntu界面完全填充VMware界面在Windows10环境下,在电脑上安装VMware和Ubuntu的具体步骤可以看此篇博客:Windows环境下,在VMware中安装Ubuntu的详细步骤本文讲述了在VMware16.0.0,Ubuntu21.10环境下,VMwareTools的安装步骤。1

    2022年5月9日
    805

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号