Blogger Information
Blog 21
fans 0
comment 0
visits 18584
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript基本语法/创建对象—2018年9月11日08时00分
耗子的博客
Original
810 people have browsed it

本节课讲解了JS的基本语法,对象的创建知识

用户创建函数,函数创建对象,对象生成一切:在JS中一切皆对象

js脚本主要有变量和函数二部分组成

变量创建方式:

var:可以重复声明变量值覆盖,同时跨作用域,方法中的变量外部都是可见的

 let:只能声明一次,跨作用域不可见(建议使用)

变量类型分为两大类:原始类型,引用类型
原始类型:string,number,boolean,undefined,null
引用类型:object,array,function,date,regexp,包装对象

typeof  查看数据类型

Array.isArray([1,2,3])   判断是否为数组类型

clear()  清空控制台

--------------------------------------------------------------------------

函数分为:普通函数,函数表达式,匿名函数,自执行函数

----普通函数
let ac=10
function ad(){return ac+50;}
ad()//返回结果值60,函数外部声明的变量,在函数内部可以自己使用,但在函数内部声明的变量,在外部不能直接使用


----表达式函数,就是一个值
let ae=function(){return 200;}
ae()//返回结果值200


----匿名函数,主要用途就是传参
使用filter方法,函数item数组元素  index索引   array数组,返回元素大于3的结果返回[4,5]
[1,2,3,4,5].filter(function(item,index,array){return item>3})


----自执行函数,声明完成后自己运行
(function af(a,b){return a+b;})(20,50)
和普通函数相似,下面是进行的拆解
// (
//     function af(a,b){return a+b;}
//     )
// (20,50)


------------------------------------------------------------

// ----创建数组

//js中数组默认都是索引数组,如果需要使用关联数组需要模拟

//let arr1=[1,2,4]  //使用字面量方式创建

//let arr2=new Array();//使用构造函数创建

//let arr3=new Array(3);//使用构造函数创建,有3个元素的素质

//let arr4=new Array(1,2,3,4);



// arr4[3]//获取到的是数组中的值4

//arr4[arr4.length-1]  //获取到数组中元素个数,默认是从1开始所以这里返回的是4,使用-1,再返回最后一个元素值



// ---------------------------------------------------------------------
// 使用concat,不直接更新改变原素组的值,并且在数组尾部添加

// let arr=[1,2,3,4,5] //定义数组
// arr.concat(4,5,6,7) //在数组尾部添加元素,输出[1, 2, 3, 4, 5, 6, 7]
// arr.concat([6,7,8]) //在数组的尾部添加元素,输出[1, 2, 3, 6, 7, 8]


//使用 slice(),获取数组的结果,从指定的位置开始获取
// arr.slice(2)  //输出结果[3]

//arr.slice(1,3);//从第2个位置取到第4个位置,输出结果不包含第4个位置,最后一个




// ---------------------------------------------------------------------
//arr.splice()增删改查都能实现,直接改变原数组

//删除
// arr5.splice(0,2)  //删除数组中的第一个元素到第二个,不包含2最后一个

//添加
// arr5.splice(1,0,88,99)  //1是起始位置,插入的数量,插入的值

//替换
//arr5.splice(2,1,55,44)  //2是起始位置,1是替换的个数,如果超过自动多插入一个,55 44是要替换和插入的值


// ---------------------------------------------------------------------

//队和栈
let arr=[];
arr.push(10,20)//入队,最后添加
arr.pop()//出栈,最后一个值

arr.unshift(8,67)//入栈,头部添加
arr.shift()//出队,头部第一个值

//尾部添加,头部出
arr.push(3,2,1);
arr.shift();

//头部添加,尾部出
arr.unshift(6,7,8)
arr.shift()

实例使用构造函数创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        let obj=new Object();//创建对象
        obj.name='熊成浩';//设置属性和值
        obj.age=30;
        obj.sex='男';


        //创建方法getName,
        obj.getName=function(){
            return this.name;}

        //执行方法返回this.name当前对象中的name
        obj.getName();

        //访问属性值
        obj["name"];
        obj['name'];
        obj.name;
        </script>
</head>
<body>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例使用字面量创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
let obj2={
            name:'熊成浩',
            age:30,
            sex:'男',
            getName:function () {return this.name;
            }
        }
        //执行方法
        obj2.getName();

        //访问属性值
        obj2["name"];
        obj2['name'];
        obj2.name;
        </script>
</head>
<body>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例使用用户自定义的构造函数

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
 function Stu(name,sex,age)
        {
            this.name=name;
            this.sex=sex;
            this.age=age;

            //方法这样写会出现代的冗余,每次执行实例都需要生成
            // this.getInfo=function () {
            //     return this.name+':  '+this.age+':  '+this.sex;
            //
            // }
        }

        //建议将公共方法写在外部,写到原型上
        Stu.prototype.getInfo2=function () {
            return this.name+':  '+this.age+':  '+this.sex;
        }



        let stu1=new Stu('小强','男',18);
        let stu2=new Stu('小张','女',16);
        let stu3=new Stu('小黄','男',22);

        console.log(stu1);
        console.log(stu2);
        console.log(stu3);
        // console.log(stu1.getInfo());
        // console.log(stu2.getInfo());
        // console.log(stu3.getInfo());

        console.log(stu1.getInfo2());
        console.log(stu2.getInfo2());
        console.log(stu3.getInfo2());
        </script>
</head>
<body>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


总结:用户创建函数,函数创建对象,对象生成一切:在JS中一切皆对象


Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post