zoukankan      html  css  js  c++  java
  • 前端学习实践笔记--JavaScript深入【2】

         趁热继续再来学习一波,接下来主要介绍函数,object,数组,面向对象,new实例化。

         在介绍“对象”之前,首先得梳妆打扮一番吧,那这梳妆打扮主要有两条路线,一条是淑女范(利用函数对象化),一条是邻家小姐范(利用object),大家各有所好嘛,

         那先分别介绍两种路线的具体梳妆方式。

         函数

         我们都知道JS是一门动态语言,所以可以动态的为函数添加或去除方法和属性,这其实就是对象所需要的东西。所以有说函数就是对象。

         正因为如此,所以我们再区分你到底是想要创建一个对象,还是仅仅想实现一个函数的时候,通过定义函数名的开头字母是否是大写来区分是否是对象。

    function Hello(name){
        this.name = name;
        this.helloWho = function(){
            console.log("hello "+ this.name);
        }
    }
    
    var helloLilei = new Hello("lilei");
    var helloHanmeimei = new Hello("hanmeimei");
    helloLilei.helloWho();
    helloLilei['helloWho']();
    helloHanmeimei.helloWho();
    
    // hello lilei
    // hello lilei
    // hello hanmeimei

          这就是简单地通过函数创建对象的过程。其中helloLilei['helloWho'].()是为了验证可以用数组的方式访问对象里面的方法和属性,不过不是很推荐这种方式来创建,因为每次new一个对象,所有方法和属性都复制了一遍,浪费空间。

          这里提一下,总共有五种方式来创建对象,分别是工厂方式,构造函数方式,原型方式,混合的原型和构造函数方式,动态原型方式,都是利用object或者函数的对象化能力,具体可以看JS创建对象的几种方式 JS创建类和对象 这两篇博文讲的很详细了,或者看我接下来的说明。

          这里不得不提一下,也是《悟透javascript》里面的观点,函数具有波粒二象性,既有对象的特征也有数组的特征,这里的数组被称为“字典”,一种可以任意伸缩的名值对的集合,Object和function的内部实现就是一个字典结构。

          Object

          有两种方式来创建一个Object,第二种是简写方式,都是一样的意思,这就创建了一个对象,但是还没有定义对象里面的方法和属性。

    var obj = new Object();
    var obj = {};

         推荐使用对象字面量的表示法,具体如下:

    var obj = {
        "first-name": "Lau",
        "last-name": "Simon",
        "nick_name":"tonylp",
        "showName": function(){
            return this["first-name"] +" "+this.nick_name+" "+this["last-name"];
        }
    };
    
    //var myName = new obj();   不可以哦。。
    // 为什么,如果我告诉你obj已经是对象了,怎么还能在对象的基础上再创建对象呢。
    console.log(obj.showName());

         还有一些细节需要注意,上面“first-name”和“last-name”不符合javascript里面定义的标示符,否则就可以直接采用(.属性名)的方式来访问了,例如“nick-name”.

         showName也可以通过数组的方式访问的。那如何使用Object来实现对象呢,一般都是在函数内部创建一个Object,然后给这个Object添加各种属性和方法,最后返回这个Object达到创建一个对象的目的。

         数组

         使用数组主要是用它自带的一整套方法,而且如果你需要,可以自己扩充的,具体怎么扩充,可以用到prototype的知识。之前说过,数组和Object其实是混乱的,参考以下两个例子:

    var numbers = ['zero','one','two','three','four'];
    var obj = {
        "0" : "zero",
        "1" : "one",
        "2" : "two",
        "3" : "three",
        "4" : "four"
        };
    
    console.log(numbers[2]);
    console.log(obj[2]);

        获取到的值都是一样的,但是numbers是继承了Array.prototype,而obj继承了Object.prototype。通过如下的代码来区分是否是Array。

    var is_array = function(value){
        return Object.prototype.toString.apply(value) === '[Object Array]';
    };

       创建类和对象

       这方面很多地方都有介绍,我之前给的网址里面也有,但是为了维持文章的完整性,我还是需要再说一遍的。

       工厂方式:

    var lev=function(){
    
        return "啊打";
    };
    function Parent(){
        var  Child = new Object();
        Child.name="李小龙";
        Child.age="30";
        Child.lev=lev;
        return Child;
    };
    
    var  x = Parent();
    console.log(x.name);
    console.log(x.lev());

    说明:

    1.在函数中定义对象,并定义对象的各种属性,,虽然属性可以为方法,但是建议将属性为方法的属性定义到函数之外,这样可以避免重复创建该方法

    2.引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new Parent();因为后者会可能出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象

    3.在函数的最后返回该对象

       构造函数方式:

    var lev=function(){
    
        return "啊打";
    };
    function Parent(){
    
        this.name="李小龙";
        this.age="30";
        this.lev=lev;
    
    };
    
    var  x =new  Parent();
    console.log(x.name);
    console.log(x.lev());

    说明:

    1.与工厂方式相比,使用构造函数方式创建对象,无需再函数内部重建创建对象,而使用this指代,并而函数无需明确return

    2.同工厂模式一样,虽然属性的值可以为方法,扔建议将该方法定义在函数之外

          还剩下原型方式,混合的原型和构造函数方式,动态原型方式就先不介绍了,等说完prototype再说这个好了。

    接下来主要还剩一个原型和闭包,然后是利用原型面向对象以及继承了,也就差不多了,改天再说。

    以上全部都属个人思想总结,请大家转载的时候附上原创链接: http://www.cnblogs.com/tonylp

  • 相关阅读:
    Codeforces Round #649 (Div. 2) D. Ehab's Last Corollary
    Educational Codeforces Round 89 (Rated for Div. 2) E. Two Arrays
    Educational Codeforces Round 89 (Rated for Div. 2) D. Two Divisors
    Codeforces Round #647 (Div. 2) E. Johnny and Grandmaster
    Codeforces Round #647 (Div. 2) F. Johnny and Megan's Necklace
    Codeforces Round #648 (Div. 2) G. Secure Password
    Codeforces Round #646 (Div. 2) F. Rotating Substrings
    C++STL常见用法
    各类学习慕课(不定期更新
    高阶等差数列
  • 原文地址:https://www.cnblogs.com/tonylp/p/4008842.html
Copyright © 2011-2022 走看看