zoukankan      html  css  js  c++  java
  • JS入门(五)

      前面提了很多JS的基础知识,像一些基本输出语句啊,JS中的关键字呐。然后是JS中的一些循环,数组之类的,在之后就是函数了。这些都是在JS中很基础的一些东西,在我刚开始学JS的时候,这些我就觉得很简单,都是一笔带过的。但在我学到后来的时候,包括接触了一些流行框架,和Ajax的时候,我发现,很多知识点都是似懂非懂的,感觉好像看到过,可是做起来却一点都不会。这都是基础不扎实的表现,只能看着别人的代码跟着打,自己做着没有思路,所以基础很重要。好了,下面就开始进入正题了。

      首先就要讲讲我之前在一篇介绍JS一些常用内置对象文章里提过字符串的属性和方法,但我们知道,只有对象才有属性和方法。字符串是简单数据类型,是没有属性和方法的。那为什么会有字符串的属性和方法呢?这是因为字符串在调用属性或是方法的时候,会先将基本数据类型包装成对象。比如我们定义了一个字符串:

    var str=”abc”;

      在我们调用字符串方法的时候,生成一个临时的对象;

    var  str=new String(“abc”;)

      当调用完成之后,将临时对象立马销毁。

      上面讲了那么多,可能没有基础的人看的话可能会有点懵逼,那就是什么是对象???

      之前我发的文章中,就有一篇是关于内置对象的。在JS中有若干内置对象,比如Math对象,Date对象,Array对象,也包括字符串(String)对象。这些都是JS给我们提供的内置对象,除此之外,我们还可以创建我们自己的对象。当然,讲了这么多,可能还是会有人有点懵逼。那么,我们就用我们身边的实际事物来打比方。比如车,直接拿车来说并不是对象,但是如果我说我去年新买的那辆车,这辆车就可以做为一个对象,对象一定是具体到一样事物。然后我的车是红色的,有四个轮子,座椅是真皮的,这就是我这辆车的属性。然后我这辆车能开出去,能开空调,这就是我的车拥有的能力也就是方法。所以到了程序中,我新买的这辆车就是对象,它的颜色,样式就是对象的属性,我的车能开空调就是对象的方法。这么一说,对象也就很清晰了,对象就是拥有一系列属性和方法的特殊数据类型而已。既然知道了对象是什么,那就看看怎么定义对象,最简单的方法就是直接用字面量的方式定义对象。

    var o= new Object();
    o.name = "张三";
    o.age = 22;
    o.sex = "男";
    o.sayHi = function(){
        console.log("大家好,我的名字是:"+ o.name+",我的年龄是:"+ o.age+",我是"+ o.sex+"生");
    };
    console.log(o.name);
    console.log(o.age);
    o.sayHi();

      我们可以用new关键字来定义一个新的对象。之后我们只要用对象加一个点之后再跟属性名的方式就可以直接给对象的属性赋值了,比如上述代码,我们定义了一个名为o的对象,它的name属性值为张三。他的age属性值为22。另外,我们还可以为对象添加方法。这里我们只需要用o加一个点再加方法名,之后直接跟一个匿名函数就好了,不过在对象中,我们不叫匿名函数,而是叫方法,现在o这个对象就有一个sayHi的方法。

      定义好了对象之后,要怎么输出对象的属性值跟方法呢?这个也很简单,只要直接用对象名加个点之后再跟上属性名就好了。而调用方法则执行用对象名加个点,之后再跟一个方法名和括号就好了。上述代码在控制台的输出结果是:

      这样我们就创建了一个我们自定义的对象了。当然,上面的创建方式也可以写成另一种形式。:

       var o = {
            name:"张三",
            age:20,
            address:"上海市",
            sex:"男",
    //        sayHi:function(){
    //            console.log("大家好,我的名字是:"+ this.name+",我的年龄是:"+ this.age+",我是"+ this.sex+"生");
    //        }
            sayHi:function(){
                console.log("大家好,我的名字是:"+ o["name"]+",我的年龄是:"+ o["age"]+",我是"+ this.sex+"生");
            }
        };

      在这里,我用了另一种方式来创建了一个对象,它是用一个大括号把对象所有的属性跟方法都括起来了,属性和属性值之间用:隔开,每条属性之间则用逗号隔开。并且,对象属性的调用有另外一种形式,也就是对象名加一个中括号,中括号里则是用双引号引起来的属性值,相比于之前那种属性值调用的方式来时,这种方式会更加灵活,只不过,之前那种书写起来更方便。所以说,两种调用方法各有各的好处跟坏处,对于初学者来说只要掌握他有这么两种书写方式就好了。

      说实在的,如果我是编写JS语言的人的话,可能编写到这就差不过了。很可惜,我不是,伟大的程序猿总是有着更深层次的思考,那就是,这里我就创建了一个对象,如果只能写入一个人的信息,那如果我要写入很多个人的信息呢,也想这样子一个个写吗?这时候,就有了用另一种方法来创建很多个对象,那就是构造函数。先来看看用构造函数是怎么来创建对象吧:

    function Student(name,sex,age){  //首字母大写,标明是一个函数,但是是构造函数,用来创建对象
        this.age=age;
        this.sex = sex;
        this.name = name;    // this指代当前创建出来的对象
        this.sayHi = function(){
            console.log("我叫"+this.name+",我今年"+this.age+",我是"+this.sex+"生");
        };
    ls.sayHi();
    var xm = new Student("小明","男",12);
    xm.sayHi();  //谁调用,this就指代谁,始终指向当前对象

      这段代码,跟用对象创建字面量很像,但又有些不同的地方,首先有疑惑的就是this是什么?在这里,this值的就是当前创建出来的对象。也就是说,谁调用这个构造函数,那么this就指代谁。可能这么说有些抽象,我们就创建一个对象

    var ls = new Student("李四","男",25); // 构造函数可以创建对象并返回

    在这里,我们定义了一个ls的变量,并且传了三个参数进来,这时候,this指代的就是ls这个对象。所以我们可以把代码看成是

        var ls = new Object();
        ls.age = 25;
        ls.sex = "男";
        ls.name = "张三";
        ls.sayHi = function () {
            console.log("我叫" + this.name + ",我今年" + this.age + ",我是" + this.sex + "生");
        }

      在创建了构造函数之后,我们在创建有相同属性和方法的对象的时候就不用每次都写这么多代码了。在用构造函数创建对象的时候,我们还多了一个新的关键字,就是new,不过也不能说新关键字,因为在我们创建内置对象的时候,其实已经用到过new了,现在就说说new的作用,它创建了一个空的对象,并让this指向这个对象,然后再执行构造函数中的代码,给当前空对象this来设置属性和方法。最后,再将this这个当前对象返回。这样,用构造函数批量创建对象就完成了。这里,还有一些值得注意的地方,就是构造的函数名一般都是首字母大写。这样,我们看到构造函数就能直接知道这个是构造函数,这样就能跟普通的函数区分开来了。

  • 相关阅读:
    想要提高自己的写作水平?吃透这篇文章就够了
    Linux(Ubuntu)下搭建ASP.NET Core环境
    详解ASP.NET Core Docker部署
    《你有多少问题要请示》精华集粹
    5年,我从文员一路晋升到总监,薪资翻了5倍[转]
    《设计你的人生》的部分经典语录
    深入浅出Redis-redis哨兵集群[转]
    什么是全栈开发者
    Asp.net mvc中应用autofac
    js unicode处理
  • 原文地址:https://www.cnblogs.com/wqc5730/p/5739883.html
Copyright © 2011-2022 走看看