亲宝软件园·资讯

展开

JavaScript函数 对象

秋落雨微凉 人气:0

我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript

JavaScript函数

JavaScript函数和Java函数是有一部分相似的,所以学习起来也会相对简单

基本构造

1.直接构造

//function代表函数标志,name为函数名称,参数可有可无
function name( 参数 ) {
            //...
    		return;
        }

2.赋值构造

//相当于function为匿名函数,然后匿名函数所得出的值返回给name,因而name可以调用function函数
var name = function( 参数 ){
            //...
        }

注意:

调用函数方法

当调用函数时,直接书写函数名称并加上相对应的参数即可

name(参数);

注意:

函数参数argument和rest

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所定义的变量实际上也是存在作用域的

函数体内变量作用域解释

1.假如在函数体中声明,则在函数体外不可以使用

function test1() {
            var x=1;
            x=x+1;
        }

x=x+2;//Uncaught ReferenceError: x is not defined

2.如果两个函数使用了相同的变量名,只要在函数内部,则不产生冲突

function test1() {
            var x=1;
            x=x+1;
        }

function test2(){
    var x=1;
    x=x+2;
}

3.内部函数可以使用外部函数的成员,但外部函数不能使用内部函数的成员

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
        }

4.当内部函数变量和外部函数变量重名时,由内向外查找,就近原则

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实际上只有一个全局作用域,任何变量(包括函数),假如没有在函数作用域内找到,就会向外查找,若在全局作用域内均未查找到,则报错RefrenceError

局部变量

在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
        }

常量Const

在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的区别

我们稍微讲解一下对象方法中的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'

Date日期对象

首先我们给出日期对象的定义方法:

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字符串

我们先来介绍一下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的类和对象

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

加载全部内容

相关教程
猜你喜欢
用户评论