扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
我们在上期内容中学习了JavaScript的基本知识点，今天让我们更加深入地了解JavaScript
成都创新互联长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为临颍企业提供专业的成都网站建设、网站制作，临颍网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。
JavaScript函数和Java函数是有一部分相似的，所以学习起来也会相对简单
1.直接构造
//function代表函数标志，name为函数名称，参数可有可无
function name( 参数 ) {
//...
return;
}
2.赋值构造
//相当于function为匿名函数，然后匿名函数所得出的值返回给name，因而name可以调用function函数
var name = function( 参数 ){
//...
}
注意：
当调用函数时，直接书写函数名称并加上相对应的参数即可
name(参数)；
注意：
argument代表函数中传入进来的所有参数，是一个数组
我们可以在函数中使用：
function name( ) {
//...
console.log(arguments[0])，
console.log(arguments[1])，
//...
}
rest代表函数中传入进来的未定义的参数，需要提前在函数中定义
我们同样可以在函数中使用：
var names = function(name,age,...rest){
//...
console.log(name);
console.log(age);
for(var value of rest){
console.log(value)
}
}
我们针对上面所有知识点给出相应代码示例：
//我们演示argument
function name( ) {
//...
console.log(arguments[0])
}
//我们演示rest
var names = function(name,age,...rest){
//...
console.log(name);
console.log(age);
for(var value of rest){
console.log(value)
}
}
下面我们在网页中进行调试：
name(1,2,3,"胡桃",true)
1
names("胡桃",18,"护膜","魔女")
胡桃
18
护膜
魔女
对于任何含有变量的语言，作用域是必定存在的
对于JavaScript，var所定义的变量实际上也是存在作用域的
function test1() {
var x=1;
x=x+1;
}
x=x+2;//Uncaught ReferenceError: x is not defined
function test1() {
var x=1;
x=x+1;
}
function test2(){
var x=1;
x=x+2;
}
function test3(){
var x=1;
//内部函数使用外部函数的成员
function indextest(){
var y=1;
x = x+1;
console.log(x);
}
indextest();
//外部函数不可以使用内部函数成员
y=y+1;//Uncaught ReferenceError: y is not defined
}
function test4(){
var x=1;
function indextest() {
var x=2;
console.log(x);
}
indextest();//这里结果为2
}
我们在JavaScript函数中定义变量时，常常将所有变量在头部定义完全，然后在后面使用
function test5(){
//在开头定义好所有变量
var x=3,y=2,z,name;
//在后面可以随便使用变量
x=x+2;
z=x+y;
}
全局变量常常带有window前缀，但默认带有，所以不需要书写
window属于JavaScript下的一个对象，window之下包含我们所定义的全局变量以及各种函数方法
function test6(){
var x = 1;
//下面所输出的x均为上方所定义的全局变量x
console.log(x);
console.log(window.x);
//下面所使用的alert和window.alert具有相同代码相同作用
alert(x);
window.alert(x);
}
我们也可以通过重新定义window下的函数方法来更改该函数原有的操作
//在下述操作之后，alert不会产生输出作用
window.alert = function() {
}
alert("Hello");
注意：
在JavaScript的ES5中会出现变量作用域过大导致代码冲突的结果：
function test7(){
for(var x=1;x<10;x++){
console.log(x);
}
// 我们希望x的作用域只在for中，但它仍会被带出for
x=x+1;
}
JavaScript在ES6中加入了新的定义类型let用来定义局部变量
function test7(){
for(let x=1;x<10;x++){
console.log(x);
}
//x则只在for中有作用
console.log(x);//Uncaught ReferenceError: x is not defined
}
在JavaScript的ES6之前，我们定义常量只是采用常识约束：
//我们定义PI
var PI = 3.14；
//但我们仍旧可以修改
PI = 3.33；
但在JavaScript的ES6中，提供了const定义类型，它所定义的变量是真正的常量，是允许修改的：
//我们定义PI
const PI = 3.14;
//我们无法修改，下述代码报错
PI = 3.33;
方法的物理定义：
我们给出方法的示例：
var student = {
//对象中包含属性
name:"胡桃",
//对象中包含方法
sing:function(){
//this指向当前对象的属性
console.log(this.name + "在唱歌")
}
}
//我们在调用方法时，需要带上对象并且加上（）
student.sing();
我们稍微讲解一下对象方法中的This和Apply：
我们给出案例进行讲解：
//首先我们给出一个外部函数来计算年龄：
function getAge(){
//这里采用了Date内置对象，我们后面会讲到，这里是获得当前年份
var nowTime = new Date().getFullYear();
return nowTime - this.birth;
}
//我们创建一个对象(直接调用getAge，相当于this的使用)
var hutao = {
name:"胡桃",
birth:2002,
age: getAge
}
//我们直接对getAge采用apply方法，使其this指向hutao
//第一个参数是对象，后面均为参数所需值
getAge.apply(hutao,[]);
我们给出网页端的操作:
//我们需要调用age时，是采用的age（）方法
console.log(hutao.age())
20
//这里采用getAge的apply方法
getAge.apply(hutao,[]);
20
JavaScript的内部对象类似于我们Java中的常见类
它们同样都是由他人创造并存在于JavaScript中，我们可以直接调用帮助我们编程
我们先来介绍一些标准类型便于内部对象的讲解
我们先给出一个新的方法，用于分析其类型：
typeof 类型对象
我们给出案例：
typeof 123
'number'
typeof "123"
'string'
typeof true
'boolean'
typeof []
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
首先我们给出日期对象的定义方法：
var name = new Date();
我们通过日期对象来进行一些方法操作：
| 方法名 | 说明 |
|---|---|
| name.getFullYear() | 返回当前年份 |
| name.getMonth() | 返回当前月份 |
| name.getDate() | 返回当前日期 |
| name.getDay() | 返回当前星期 |
| name.gatHours() | 返回当前小时 |
| name.getMinutes() | 返回当前分钟 |
| name.getSeconds() | 返回当前秒数 |
| name.getTime() | 返回当前时间到1970 1.1 00：00：00 的毫秒数 |
我们同时提供一些Date对象输出日期的不同写法（这里在网页示例）：
now = new Date()
Thu Jul 14 2022 13:27:07 GMT+0800 (中国标准时间)
now.toLocaleString()
'2022/7/14 13:27:07'
now.toGMTString()
'Thu, 14 Jul 2022 05:27:07 GMT'
我们先来介绍一下JSON：
在JavaScript中一切皆为对象，任何JS所支持的类型都是对象
格式：
我先在这里讲解一下JSON的格式，并且给出对象进行对比：
//对象具有对象的形式
var obj = {
name:"万叶",
eyes:"风"
}
//JSON虽然和对象相似，但实际上是字符串，内部所有元素都有"""所包围
var json = '{"name":"万叶","eyes":"风"}'
最后我们给出JSON和对象之间的转换：
var obj = {
name:"万叶",
eyes:"风"
}
//对象转化为JSON字符串
var jsonUser = JSON.stringify(obj);
//JSON字符串转化为对象
var wanye = JSON.parse('{"name":"万叶","eyes":"风"}')
首先面向对象编程是什么呢？
JavaScript的面向对象与其他面向对象有一点区别：
//我们先给出一个整体对象（类似于类，但类需要写有数据）
var Student = {
name:"name",
age:18,
run:function() {
console.log(this.name + "running!")
}
};
//我们创建一个对象
var xiaoming = {
name:"xiaoming"
}
//然后我们让小明的本源指向Student对象
xiaoming._proto_ = Student;
//下面是网页测试给出的结果，我们可以看到xiaoming继承了Student的方法
// xiaoming
// {name: 'xiaoming', _proto_: {…}}
// name: "xiaoming"
// _proto_: {name: 'name', age: 18, run: ƒ}
// [[Prototype]]: Object
但是在ES6版本之后，JavaScript给出了class关键字，具体化了类这个概念：
class定义模板：
class name{
//...
}
下面给出class案例：
class Student{
//class配置的constructor方法，用来创造对象的属性
constructor(name){
this.name = name;
}
//方法直接在下面书写即可
run(){
console.log(this.name + "running");
}
}
//创建新对象的方法（需要把所需参数写入）
var yebao = new Student("yebao");
我们给出网页调试结果：
yebao
Student{name: 'yebao'}
yebao.name
'yebao'
yebao.run()
4.html:19 yebaorunning
好的，关于JavaScript的函数和对象我们就介绍到这里，下一期我们会讲解JavaScript的重点BOM和DOM部分。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网