JS中的对象以及在web前端的应用

最新推荐文章于 2022-08-25 20:38:02 发布

芊芊子

最新推荐文章于 2022-08-25 20:38:02 发布

阅读量225

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_57574258/article/details/122064504

版权

JS的对象

创建对象的方式

使用字面量创建对象

var a={};//JS中空的对象，可以想象成Java中空的Map

var student={
    //使用（ ：）来分割 key和 value
    name:'zhangsan',
    age:18,
    doing:function(){
        console.log('hello');
    }
}
console.log(a);
console.log(student);

function someMethods(){
    console.log("去外婆家")
}
var person={
    name:'小红帽',
    doing:someMethods,//把已经写好的函数作为doing key的value
    //匿名函数
    say:function (target) {
        console.log("你好，"+target)
    }
}
console.log(person);

在这里插入图片描述

JS中的对象是没有限制的，他和map一样可以随时往里面添加key-value

student.height=190;
student['weight']=180;

在这里插入图片描述

使用函数创建对象
(1) 使用普通函数创建对象

function creatStudent(name,age){
    var s={
        name:name,
        age:age,
    }
    s.sayHello=function(target){
        console.log("你好"+target);
    }
    return s;
}
var o1=creatStudent("张三",18);
var o2=creatStudent("李四",20);

在这里插入图片描述

(2) 使用构造函数创建对象

//JS中本身是没有类的，可以把Student()这个函数当做类+构造函数使用
function Student(name,age){
    //this代表当前对象，把整个函数当成构造函数
    this.name=name;
    this.age=age;
    this.sayHello=function(target){
        console.log("hello,")
    }
    //不需要返回值,当成构造函数，创建对象
}
var o1=new Student("张三",20);
var o2=new Student("李艾",21);

在这里插入图片描述

注意：错误用法，没有使用new，则视为调用Student函数由于我们的Student没有返回值，所以，视为返回undefined所以o4是undefined

在这里插入图片描述
（3） ES6中，引入了class作为语法糖存在

语法糖：前端有这种叫法，而后端却没有这种实现

//纯语法糖形式
class Student{
    //由于JS对象的属性是开放的，可以随时添加，不规定属性
    //Constructor:构造方法，无论class叫什么名字
    Constructor(name,age){
        this.name=name;
        this.age=age;
    }
    //这里不用写 function
    sayHello(target){
        console.log('hello'+target);
    }
}
var o1=new Student("王五",12);

在这里插入图片描述

this的用法

class Student{
    constructor(name,age) {
        this['name']=name;//这种形式也可以
        this.age=age;//this.age当前对象中的age
    }
    introduce(){
        //不能省略 this，直接写 name
        console.log(this.name+"，"+this['age']);
    }
}
var o1=new Student("赵武",22);
o1.introduce();

在这里插入图片描述

多态的使用

function f(o) {
    //根本不管o是什么类型，只要求o这个对象有key是say的value
    //并且value的值是function
    o.say();
    //习惯上，这种方式叫做鸭子类型（duck type）
}
f({
    say:function(){console.log('我是临时构造的对象')}
})

在这里插入图片描述

使用对象的属性和方法:

使用 . 成员访问运算符来访问属性 . 可以理解成 “的”

console.log(student.name);

使用 [ ] 访问属性, 此时属性需要加上引号

console.log(student['height']);

调用方法, 别忘记加上 ()

student.sayHello();

JS在web前端的应用

利用JS的语法在恰当的时机，操作(CRUD)浏览器OR浏览器中展示的文档信息
操作浏览器（一批对象）：BOM----Browser Object Model
操作文档(一批对象，树结构）：DOM-----Document Object Model

操作DOM
在这里插入图片描述

获取元素：
（1）querySelector(选择器字符串)=>文档中第一个符合选择器规则的元素（query:查询 selector:选择器），选择器完全和CSS中的选择器一致，如有两个h1则表示的是第一个
（2）querySelectorAll(选择器)=>文档中所有符合选择器规则的元素，类似数组
HTMLElement: (所有html元素都具备的)
（1）innerText属性:标签下的文本

（2）innerHTML属性:标签下的文本，不进行HTML字符转义(按照文本的原始内容展示)
在这里插入图片描述

class
其中class属性略特殊，针对class, ES6 的DOM提供了classList 这个属性，比较方便操作

在这里插入图片描述

window.location=‘https://www.baidu.com’ 从当前网页跳转到百度

事件驱动（event-driven）

明确发生某件特殊含义的行为（事件）时，执行某个动作
假设网页上有按钮
事件：用户点击按钮、用户鼠标滑过按钮
事件驱动：

当（用户点击按钮）时，执行某动作（把h1内容替换掉）
当（鼠标滑过按钮）时，执行某动作（把h1颜色修改掉）

事件:点击(click) 鼠标划过(hover)
执行某动作:赋值一个函数
事件源:按钮(button)
当事件发生时，执行该函数
当: on

1. 找到h1标签,修改其innerText属性
2. 找到h1标签,修改其style属性(CSS样式)

点击鼠标

<h1>h1 的初始状态</h1>
<button type="button">按钮</button>
<script src="script.js"></script>

//定义当事件发生时的行为，以函数的形式体现
function changeH1(){
    console.log("changeH1被调用了")
    //1.找到 h1标签
    var h1=document.querySelector('h1');
    //2.修改 h1标签的内容
    h1.innerText='按钮被点击';
}

//为button（事件源）绑定事件驱动行为
//1.找到button
var button=document.querySelector('button');
// 2.当(on) 点击(click)，执行哪些动作(赋值一 个函数)
//从对象角度说:onclick是html 元素的一个属性
button.onclick=changeH1;//changeH1不加括号，只是把函数赋值给属性，并没有发生函数调用
console.log("为button绑定了changeH1函数")
//只有button被点击时，有浏览器内部调用changeH1，我们不需要关心内部调用

点击前
在这里插入图片描述
点击后

鼠标滑过

<h1>你好，中国</h1>
<button>按钮</button>
<script src="script.js"></script>

//为按钮划过事件，绑定函数（bind）
var button=document.querySelector('button');
//由于h1要多次使用，所以要提前查好
var h1=document.querySelector('h1');
//直接赋值成匿名函数
//鼠标进入
button.onmouseenter=function(){
    console.log("鼠标滑过");
    //为 h1赋予 CSS属性
    //使用CSS内联，使用style
    h1.style='color:blue;';
}
//鼠标划出
button.onmouseleave=function(){
    console.log("鼠标划出");
    //将 h1的CSS属性去掉
    h1.style='';
}

在这里插入图片描述

开灯关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开灯/关灯</title>
    <style>
        body{
            background-color: black;
        }
        #light{
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        .off{
            background-color: #050505;
        }
        .on{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div>
    <div id="light" class="off"></div>
    <button type="button">开灯</button>
</div>
<script>
    var button=document.querySelector("button");
    var light=document.querySelector("#light");
    var body=document.querySelector("body");
    button.onclick=function(){
        if(light.classList.contains('off')){
            //说明灯是关的，把灯打开
            //1.把灯的背景颜色修改掉
            body.style='background-color:white;';
            //2.把灯打开
            light.classList.remove('off');
            light.classList.add('on');
            //3.把按钮的文本替换掉
            button.innerText='关灯';
        }else{
            //说明灯是开的的，把灯关掉
            //1.把灯的背景颜色修改掉
            body.style='';
            //2.把灯关掉
            light.classList.remove('on');
            light.classList.add('off');
            //3.把按钮的文本替换掉
            button.innerText='开灯';
        }
    }
</script>
</body>
</html>