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

JS的对象

创建对象的方式

使用字面量创建对象

var a={};//JS中空的对象，可以想象成Java中空的Mapvar student={//使用（ ：）来分割 key和 valuename:'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;}//这里不用写 functionsayHello(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，直接写 nameconsole.log(this.name+"，"+this['age']);}
}
var o1=new Student("赵武",22);
o1.introduce();

多态的使用

function f(o) {//根本不管o是什么类型，只要求o这个对象有key是say的value//并且value的值是functiono.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内联，使用styleh1.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>

JS中的对象以及在web前端的应用相关推荐

JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
JS中集合对象(Array.Map.Set)及类数组对象的使用与对比在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java ...
Js中Reflect对象
Js中Reflect对象 Reflect是ES6起JavaScript内置的对象,提供拦截JavaScript操作的方法,这些方法与Proxy对象的handlers中的方法基本相同. 描述 Refle ...
Js中Proxy对象
Js中Proxy对象 Proxy对象用于定义基本操作的自定义行为,例如属性查找.赋值.枚举.函数调用等. 语法 const proxy = new Proxy(target, handler); ta ...
Js中Symbol对象
Js中Symbol对象 ES6引入了一种新的基本数据类型Symbol,表示独一无二的值,最大的用法是用来定义对象的唯一属性名,Symbol()函数会返回symbol类型的值,该类型具有静态属性和静态方 ...
Js中Array对象
Js中Array对象 JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象. 描述在JavaScript中通常可以使用Array构造器与字面量的方式创建数组. c ...
Js中Number对象
Js中Number对象 JavaScript的Number对象是经过封装从而能够处理数字值的对象,Number对象由Number()构造器以及字面量声明的值在转化为包装对象时创建,JavaScript ...
Js中String对象
Js中String对象 String全局对象是一个用于字符串或一个字符序列的构造函数. 描述创建一个字符串可以通过字面量的方式,通过字面量创建的字符串变量在调用方法的时候能够自动转化为临时的包装对象 ...
Js中RegExp对象
Js中RegExp对象 RegExp对象表示正则表达式,是由普通字符和特殊字符也叫元字符或限定符组成的文字模板,用于对字符串执行模式匹配. 描述创建一个RegExp对象通常有两种方式,一种是通过字面 ...
js中WINDOW对象中的navigator成员对象
js中DOM, DOCUMENT, BOM, WINDOW 区别全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的navigator成员对象 naviga ...
js中WINDOW对象
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象 BOM的核心是window,而window对象又具有双重角色,它既是通过js访问浏览器窗口的一个接口,又是一 ...