整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

JavaScript语法：定义类class

JavaScript语法：定义类class

CMAScript 2015(ES6)引入了JavaScript类的概念，增强了面向对象的语言特性。

类定义

通过class关键字来定义一个类。

class MyClass {

}

类继承

通过extends关键字来继承一个父类。

class MyClass extends MyFatherClass {

}

构造函数

类可以包含一个名为constructor的构造函数，该方法在实例化类对象的时候会被调用。一个类只能有一个构造函数，出现多个constructor会报错。如果没有定义构造函数，会添加默认的构造函数。

class MyClass {
 constructor() {
 }
}

如果继承了父类，可以在构造函数中使用super()来调用父类的构造函数。另外如果在构造函数中使用了this关键字，需要在使用this之前首先调用super();

class MyClass extends MyFatherClass {
 constructor(x) {
 super();
 this.x=x;
 }
}

方法定义

  • 普通方法
class MyClass {
 // 方法1
 method1() {
 }

 // 方法2
 method2(x, y) {
 }
}

普通方法需要通过类实例对象来调用。

const my=new MyClass();
my.method1();
  • 静态方法

使用static关键字来定义一个静态方法。

class MyClass {
 static doSomething() {
 }
}

调用静态方法不需要实例化该类，不能通过一个类实例调用静态方法。

MyClass.doSomething();
  • getter和setter方法
class MyClass {
 get name() {
 }

 set name(name) {
 this.name=name;
 }
}

getter和setter方法调用方式：

const my=new MyClass();
// getter调用
const name=my.name;
// setter调用
my.name='John';

成员变量

和其他静态语言如Java不一样的是，JavaScript的成员变量不需要定义，在类内部直接通过this.xxx来调用就可以。

、认识DOM对象模型

DOM：Document Object Model（文档对象模型）

节点与节点的关系


1、访问节点，使用getElement系列方法访问指定节点

getElementById()、 getElementsByName()、

getElementsByTagName()；

2、根据层次关系访问节点：

属性名称 描述

parentNode 返回节点的父节点

childNodes 返回子节点集合，childNodes[i]

firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastChild 返回节点的最后一个子节点

nextSibling 下一个节点

previousSibling 上一个节点


elment属性：

属性名称 描述

firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastElementChild 返回节点的最后一个子节点

nextElementSibling 下一个节点

previousElementSibling 上一个节点


节点信息表示：

nodeName：节点名称

nodeValue：节点值

nodeType：节点类型


操作节点的属性：

getAttribute("属性名")

setAttribute("属性名","属性值")


创建和插入节点：

名称 描述

createElement( tagName)创建一个标签名为tagName的新元素节点

A.appendChild( B)把B节点追加至A节点的末尾

insertBefore( A,B )把A节点插入到B节点之前

cloneNode(boolean)复制(克隆)某个指定的节点



删除和替换节点：

名称描述

removeChild( node)删除指定的节点

replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点


操作节点样式：

改变样式的属性

style属性

HTML元素.style.样式属性＝"值"；


className属性

HTML元素.className="样式名称"；


二、示例展示

1.轮播图示例

<!DOCTYPE html>

<html lang="en">


<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>轮播图显示</title>

</head>

<style>

* {

margin: 0;

padding: 0;

}


#outer {

width: 300px;

margin: 50px auto;

padding: 10px;

background-color: greenyellow;

text-align: center;

}


#outer>img {

width: 300px;

height: 300px;

}

</style>

<script>

window.onload=function () {

// 点击按钮切换图片

var prev=document.getElementById("prev");

var next=document.getElementById("next");

// 要切换图片就要修改img标签的src属性

var img=document.getElementsByTagName("img")[0];

var imgArr=["img/tou01.jpg", "img/tou02.jpg", "img/tou03.jpg", "img/tou04.jpg"];

// 创建一个变量，来保存当前正在显示的图片的索引

var index=0;

// 设置提示文字

var info=document.getElementById("info");


// 分别为两个按钮绑定单机响应函数 上一张函数


prev.onclick=function () {

index--;

// 判断index是否小于0

if (index < 0) {

index=imgArr.length-1;

}

img.src=imgArr[index];

info.innerHTML="共"+imgArr.length+"张图片"+"当前是第"+(index+1)+"张";

}

// 下一张函数

next.onclick=function () {

index++;

if (index > imgArr.length - 1) {

index=0;

}

img.src=imgArr[index];

// 当我在点击按钮以后在重新执行一遍

info.innerHTML="一共"+imgArr.length+"张图片"+"当前是第"+(index+1)+"张";

}

}


</script>


<body>

<div id="outer">

<p id="info">一共4张图片当前是第1张</p>

<img src="img/tou01.jpg" alt="" />


<button id="prev"><上一张</button>

<button id="next">下一张></button>

</div>


</body>


</html>


2.论坛发帖示例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>制作课工场论坛发贴</title>

</head>

<style>

*{margin: 0; padding: 0; font-family: "Arial", "微软雅黑";}

ul,li{list-style: none;}

.bbs{margin: 0 auto; width: 600px; position: relative;}

header{padding: 5px 0; border-bottom: 1px solid #cecece;}

header span{display:inline-block; width: 220px; height: 50px; color: #fff; background: #009966; font-size: 18px; font-weight: bold; text-align: center;line-height: 50px; border-radius: 8px; cursor: pointer;}

.post{position: absolute; background: #ffffff; border: 1px #cccccc solid; width: 500px; left: 65px; top:70px; padding: 10px; font-size: 14px; z-index: 999999; display: none;}

.post .title{width: 450px; height:30px; line-height: 30px; display: block; border: 1px #cecece solid; margin-bottom: 10px;}

.post select{width: 200px; height: 30px;}

.post .content{width: 450px; height: 200px; display: block; margin: 10px 0;border: 1px #cecece solid;}

.post .btn{width: 160px; height: 35px; color: #fff; background: #009966; border: none; font-size: 14px; font-weight: bold; text-align: center; line-height: 35px; border-radius: 8px; cursor: pointer;}


.bbs section ul li{padding: 10px 0; border-bottom: 1px #999999 dashed;

overflow: hidden;}

.bbs section ul li div{float: left; width: 60px; margin-right: 10px;}

.bbs section ul li div img{ border-radius:50%; width: 60px;}

.bbs section ul li h1{float: left; width: 520px; font-size: 16px; line-height: 35px;}

.bbs section ul li p{color: #666666; line-height: 25px; font-size: 12px; }

.bbs section ul li p span{padding-right:20px;}

</style>

<body>

<div class="bbs">

<header><span onclick="showDiv();">我要发帖</span></header>

<section>

<ul id="showContent"></ul>

</section>

<div class="post" id="showSubmit">

<input class="title" placeholder="请输入标题（1-50个字符）" id="title">所属版块：

<select id="section">

<option>请选择版块</option>

<option value="电子书籍">电子书籍</option>

<option value="新课来了">新课来了</option>

<option value="新手报到">新手报到</option>

<option value="职业规划">职业规划</option>

</select>

<textarea class="content" id="content"></textarea>

<input class="btn" value="发布" onclick="publish();">

</div>

</div>

</body>

<script src="js/bbs.js"></script>

</html>

// 全局对象

var imgs=new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");

// 显示发帖div

function showDiv() {

document.getElementById("showSubmit").style.display="block";

}


// 点击发布添加内容到Li


function publish() {

// 获得随机头像的数组下标

var index=Math.floor(Math.random() * 4);

// 创建li节点

var tvLi=document.createElement("li");

// 创建div节点

var tvDiv=document.createElement("div");

// 创建img图片节点

var tvImg=document.createElement("img");


// 设置图片节点src属性

tvImg.setAttribute("src", "../threeClass/img/" + imgs[index]);


// div添加图片为子节点

tvDiv.appendChild(tvImg);

// 创建h1标签节点


var tvh1=document.createElement("h1");

// 取得发布div框里填充的标题的值填充到h1标签

var tvTitle=document.getElementById("title").value;

tvh1.innerText=tvTitle;

// 创建一个P标签节点

var tvP=document.createElement("p");

// 创建两个span标签节点

var tvSpanOne=document.createElement("span");

var tvSpanTwo=document.createElement("span");


// 第一个span标签取填充div里的下拉列表框所选的值

var tvSelect=document.getElementById("section").value;

tvSpanOne.innerText="板块：" + tvSelect;


// 第二个span标签取当前系统时间

var date=new Date();

var str=date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() + "" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

tvSpanTwo.innerText="时间是：" + str;


// 两个span标签追加到p标签节点里

tvP.appendChild(tvSpanOne);

tvP.appendChild(tvSpanTwo);


// 把div、h1、p 、标签追加到li里


tvLi.appendChild(tvDiv);

tvLi.appendChild(tvh1);

tvLi.appendChild(tvP);


// 把添加好的li在插入到ul标签节点里

var oldUL=document.getElementById("showContent");

// 把新添加的li节点插入到捞的li节点之前

oldUL.insertBefore(tvLi, oldUL.firstChild);


// 清除div里填充过的内容，如标题和内容部分

document.getElementById("title").value="";

document.getElementById("content").value="";


// 设置发布div隐藏

document.getElementById("showSubmit").style.display="none";

}


效果图展示：file:///D:/ruanjian/VS/JS/threeClass/lunbotu.html

file:///D:/ruanjian/VS/JS/threeClass/lunbotu.html

avascript ES5 定义类（class）的三种方法

一、构造函数法

function Dog() {
    this.name='大黄';
    this.call=function call() {
        console.log('汪汪');
    }
}
Dog.age=10;
Dog.prototype.eat=function () {
    console.log('吃狗粮');
}
var dog1=new Dog();
dog1.call()
dog1.eat()

二、Object.create()

const dog={
    name: '大黄',
    call:function(){
        console.log('汪汪');
    }
}
const dog1=Object.create(dog);
dog1.call();

三、极简主义法

var Dog={
    create:function(){
        var dog={};
        dog.name='大黄';
        dog.call=function(){
            console.log('汪汪');
        }
        return dog;
    }
}
var dog1=Dog.create();
dog1.call();

ES6 定义类

使用 class 关键字来声明类。

class Person {
    constructor(name,age){
        this.name=name;
        this.age=age
    }
}
let user=new Person('张三',22);
console.log(user);

constructor 构造函数用于创建和初始化一个类

class Person {
    // 私有变量
    #_life='';

    // 构造函数
    constructor(name, age, sex, life) {
        this.name=name;
        this.age=age;
        // 约定命名 通过在变量名称前加一个下划线来定义私有变量，实际上外部可以直接访问
        this._sex=sex;
        // #作为前缀 定义私有作用域，外部无法直接访问
        this.#_life=life;
    }

    // Getter
    get getName() {
        return this.name
    }

    // Setter
    set setName(name) {
        this.name=name;
    }

    get sex() {
        return this._sex;
    }

    get life() {
        return `${this.#_life}年`
    }

    // 方法
    sayHi() {
        console.log(`hello,我是${this.name}`);
    }

    // 静态方法 该方法不会被实例继承，而是直接通过类来调用
    static eat(food) {
        console.log(`吃了${food}`);
    }

    // 私有方法
    _a() {
        console.log('约定命名的私有方法');
    }

    #_sleep() {
        console.log(`${this.name}睡着了`);
    }

    sleep(){
        this.#_sleep()
    }
}

function a() {
    console.log(`${this.name}睡着了`);
}

let user=new Person('张三', 22, '男', 99);
console.log(user);
console.log(user.getName);
user.name='王五'
console.log(user.name);
user.sayHi()
Person.eat('苹果')
user._a()
// user.#__sleep() // 无法调用
user.sleep()
console.log(user.sex);
console.log(user.life);

继承


在线咨询
上一篇：javascript实现直播网页中常用点赞效果
下一篇：闪光对焊机的安装维护安全！苏州安嘉

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 伊吾县 泸定县 雷波县 丹徒区 昌邑 恩平市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服