您的当前位置:首页正文

JavaScript中关于class的调用方法

2023-11-30 来源:博科教育

class的调用,其实是可以叠加的,当然了这要求样式不同的情况下,如果样式相同,则后一个样式会覆盖前一个样式。本文我们就和大家分享JavaScript中关于class的调用方法。

1、举例如下:

<p id="test" class="aaa bbb">测试关于class的调用</p>
.aaa{ font-size:20px; color:red; }.bbb{ font-size:50px; color:green;}
var test=document.getElementById('test');test.className='aaa';test.className='aaa bbb';//因为aaa和bbb的样式相同,所以,bbb的样式会覆盖aaa的样式

所以最后‘测试关于class的调用'几个字的样式是:font-size:50px; color:green;

2、这样的添加类方式很繁琐,每次添加一个新的,我还要带上之前写的类,容易带漏,并且还要检查是否带全,所以可以编写函数方法来解决添加类和删除类的问题:

function hasClass(element,className){ //判断是否存在类 return element.className.match(new RegExp('(s|^)'+className+'(s|$)')); }//添加一个Classfunction addClass(element,className){ if(!hasClass(element,className)){ element.className+=' '+className; } } //删除一个Classfunction removeClass(element,className){ if(hasClass(element,className)){ element.className=element.className.replace (new RegExp('(s|^)'+className+'(s|$)'),' '); }}

小编还为您整理了以下内容,可能对您也有帮助:

如何在js中调用class的方法调用

function fun(){
var _this = this;
//如果函数是用var定义的私有函数,如下
var func1 = function(){ }
//那么类中其他函数都可以直接通过func1()的形式调用
//如果函数是共有的,即用this定义,如下
this.func2 = function(){ }
/*则需要得到func对像的引用,即fun中的this(注意:是fun中的).
然而到了调用者函数(如下的caller)内部时,this指的是caller函数而不再是fun,所以可以考虑在fun中定义一个私有变量 var _this = this 来保证指向的是fun
*/
//例子:在this.caller中调用类中的其他函数
this.caller = function(){
func1();//私有函数直接调用
_this.func2();//公共函数,需要fun的this的指向
}
}

如何在js中调用class的方法调用

function fun(){
var _this = this;
//如果函数是用var定义的私有函数,如下
var func1 = function(){ }
//那么类中其他函数都可以直接通过func1()的形式调用
//如果函数是共有的,即用this定义,如下
this.func2 = function(){ }
/*则需要得到func对像的引用,即fun中的this(注意:是fun中的).
然而到了调用者函数(如下的caller)内部时,this指的是caller函数而不再是fun,所以可以考虑在fun中定义一个私有变量 var _this = this 来保证指向的是fun
*/
//例子:在this.caller中调用类中的其他函数
this.caller = function(){
func1();//私有函数直接调用
_this.func2();//公共函数,需要fun的this的指向
}
}

如何在js里调用js类

js中的类通过function进行定义,使用时,直接new 函数名就是一个类定义。

举例

function TestClass(){
   this.a='2';
   this.kk = function show(){
     alert('3');
   }
}
var tc = new TestClass();//实例化class
alert(tc.a);//访问class的属性
alert(tc.kk());//访问方法

 你的代码可以通过如下

 

var tc = new a();
tc.c('测试');

如何在js里调用js类

js中的类通过function进行定义,使用时,直接new 函数名就是一个类定义。

举例

function TestClass(){
   this.a='2';
   this.kk = function show(){
     alert('3');
   }
}
var tc = new TestClass();//实例化class
alert(tc.a);//访问class的属性
alert(tc.kk());//访问方法

 你的代码可以通过如下

 

var tc = new a();
tc.c('测试');

如何用js点击class?

HTML DOM3提供了getElementsByClassName()方法用以根据类名获取元素,但是IE9以下浏览器并不支持。考虑兼容性,可以采用如下思路:获取元素,判断className属性是否为目标类名,是的话即添加onclick事件。

下面实例演示——点击class为test1的a标签弹出提示框:

1、HTML结构

<div>
<a class="test1" href="#">第一项</a>
<a class="test2" href="#">第二项</a>
</div>

2、javascript代码

window.onload = function(){
var a = document.getElementsByTagName("a");
for(i=0;i<a.length;i++){
if(a[i].className == "test1"){
a[i].onclick = function(){alert(this.innerHTML+"被点击了")}
}
}
}

3、效果演示

如何用js点击class?

HTML DOM3提供了getElementsByClassName()方法用以根据类名获取元素,但是IE9以下浏览器并不支持。考虑兼容性,可以采用如下思路:获取元素,判断className属性是否为目标类名,是的话即添加onclick事件。

下面实例演示——点击class为test1的a标签弹出提示框:

1、HTML结构

<div>
<a class="test1" href="#">第一项</a>
<a class="test2" href="#">第二项</a>
</div>

2、javascript代码

window.onload = function(){
var a = document.getElementsByTagName("a");
for(i=0;i<a.length;i++){
if(a[i].className == "test1"){
a[i].onclick = function(){alert(this.innerHTML+"被点击了")}
}
}
}

3、效果演示

请问javascript如何调用自己定义的类里面的方法

function Person(name,age){
this.name = name;
this.age = age;
this.getName = function(){
return this.name;
}
}

var p = new Person("test",23);
alert(p.getName());

请问javascript如何调用自己定义的类里面的方法

function Person(name,age){
this.name = name;
this.age = age;
this.getName = function(){
return this.name;
}
}

var p = new Person("test",23);
alert(p.getName());

浅析js class

在 ES6 规范中,引入了 class 的概念。使得 JS 开发者终于告别了,直接使用原型对象模仿面向对象中的类和类继承时代。

但是JS 中并没有一个真正的 class 原始类型, class 仅仅只是对原型对象运用语法糖。所以,只有理解如何使用原型对象实现类和类继承,才能真正地用好 class。

本质上js中class其实是构造函数的另一种写法,使之更加直观的展现构造器中的各项属性

基本使用

注意点:

(1)constructor是一个构造函数方法,创建对象时自动调用该方法

(2)constructor是类必须的一个属性,少了他类的创建会报错,如果我们不写的话js会给他自动加上

(3)this指的是实例化对象,就相当于构造函数中的this,指向的是当前创建的对象

(4)类中声明函数不需要function关键字,直接函数名即可

(5)方法之间不需要都好分割,加了会报错

因为本质上是构造函数的另一种写法,所以他的使用和一些其他特性都是和构造函数相似的。比如调用都是通过new关键字 并且class也存在prototype这个属性,通过她我们可以给这个类的原型对象定义属性。通过这个类创建出的对象一样会有这个属性

类的继承

子类继承基类后,同名的属性会覆盖掉基类,以上例子中两个类都有sayName函数,但是调用的时候输出的是子类的sayName。

一个构造函数可以使用 super 关键字来调用一个父类的构造函数。

同时类也支持get和set操作

js class类

js class类是什么呢?一起来看下吧:

class(类)是ECMAScript6中新增的关键字,专门用于创建“类”的,“类”可被用于实现逻辑的封装。传统面向对象的编程序语言都是“类”的概念,对象都是由类创建出来,然而早期JavaScript中是没有类的,面向对象大多都是基于构造函数和原型实现的,但是ECMAScript6规范开始增加了“类”相关的语法,使得JavaScript中的面向对象实现方式更加标准。

类的声明

定义一个类的一种方法是使用一个类声明,即用带有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

博科教育还为您提供以下相关内容希望对您有帮助:

如何在js中调用class的方法调用

function fun(){ var _this = this;//如果函数是用var定义的私有函数,如下 var func1 = function(){ } //那么类中其他函数都可以直接通过func1()的形式调用 //如果函数是共有的,即用this定义,如下 this.func2 ...

javascript 如何调用不同的 class

.button{background-color:#ff3322} 这里是文字 这里是文字 function test(obj){ if(obj.className=="top"){obj.className="button"} else {obj.className="top"} }

请问javascript如何调用自己定义的类里面的方法

function Person(name,age){ this.name = name;this.age = age;this.getName = function(){ return this.name;} } var p = new Person("test",23);alert(p.getName());...

如何用js点击class?

1、HTML结构 第一项第二项2、javascript代码 window.onload = function(){var a = document.getElementsByTagName("a");for(i=0;i

如何在js里调用js类

function show(){ alert('3'); }}var tc = new TestClass();//实例化classalert(tc.a);//访问class的属性alert(tc.kk());//访问方法 你的代码可以通过如下 var tc = new a();tc.c('测试');...

js 如何获取class的元素

使用document.getElementsByClassName(’class‘)获取标签,使用innerText获取元素内的数据内容。1、设计一个HTML简单页面,代码如下:2、设计绑定的函数alertText(),代码如下:3、此时的页面展示如下:4、演示,点击其中的div,...

浅析js class

本质上js中class其实是构造函数的另一种写法,使之更加直观的展现构造器中的各项属性 基本使用 注意点:(1)constructor是一个构造函数方法,创建对象时自动调用该方法 (2)constructor是类必须的一个属性,少了他类的创建会...

在javascript代码中如何引用.class文件?

你说的是网页么?网页只能重新打开一个html来实现。必须点了按扭,JS去下载一个XML(其实什么文件都可以)。然后这个文件执行.class的命令。

如何调用内部类中的静态方法

一般来说,外部类调用内部类的方法分为以下几种情况:1.使用static可以声明一个内部类, 可以直接在外部调用 // 定义外部类 class Outer { // 定义外部类的私有属性 private static String info = "hello world";// ...

js怎么动态控制div的class?

先获取到li标签集合,再遍历该集合把每个className加上去: var li = document.getElementsByTagName('li'); for(var i = 0;i&lt;li.length;i++){ li[i].className = i+1; } ...

Top