您的位置：首页 > Web前端 > JavaScript

从零开始学习前端JAVASCRIPT — 12、JavaScript面向对象编程

2018-02-28 19:43 645 查看

一、构造函数的使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象编程</title>
</head>
<body>
<script>
/*构造函数(构造函数命名一般此采用大驼峰式命名即驼峰式命名首字母大写)*/
// 构造函数中的this指向的是即将生成的对象
// ES5的语法
function Es5Person(name) {
this.name = name;
this.sleep = function () {
console.log('喜欢睡觉！');
};
}
// ES6语法
class Es6Person {
constructor(name) {
this.name = name;
}
//定义方法省略关键字，且方法直接绑定到原型对象
sleep() {
console.log('喜欢睡觉！');
}
}
var personOne = new Es5Person('小明');
var personTwo = new Es6Person('小张');

console.log(personOne);
console.log(personTwo);
</script>
</body>
</html>

/* contaiter 模态框背景层 */
.contaiter{
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10050;
background: rgba(0,0,0,.1);
}
/* modal-dialog 模态框弹出框 */
.modal-dialog{
margin: 40px auto;
width: 50%;
border-radius: 15px;
border: 1px dashed #f4f4f4;
background: #ffffff;
box-shadow: 0 0 10px #000000;
outline: none;
}
/* modal-close 关闭模态框 */
.modal-close{
position: absolute;
font-size: 36px;
color: #000000;
right: 20px;
top: 10px;
}
/* modal-header 模态框头部 */
.modal-header{
position: relative;
padding: 20px;
border-bottom: 1px dashed #f4f4f4;
}
.modal-title{
font-size: 16px;
}
/* modal-content 模态框内容区 */
.modal-content{
padding: 20px;
font-size: 16px;
}
/* modal-footer 模态框底部 */
.modal-footer{
border-top: 1px solid #f4f4f4;
padding: 20px;
text-align: right;
}
.modal-footer input{
margin: 0 10px;
display: inline-block;
padding: 10px 20px;
outline: none;
border: 1px solid #555555;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 0 2px #000000;
}
.modal-footer .commitBtn{
background: #008B00;
color: #ffffff;
}

/* popupBtn */
.popupBtn{
margin: 0 10px;
display: inline-block;
padding: 10px 20px;
outline: none;
border: 1px solid #555555;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 0 2px #f4f4f4;
background: #ff0000;
}

index.css

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航