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

  • 相关阅读:
    第二章——链表
    第一章:基本概念
    第八章
    画图
    关于写代码时的心态问题
    checked用id选择器找不到怎么办
    this指向问题
    es6箭头函数
    微信小程序——获取步数
    小程序——数据缓存
  • 原文地址:https://www.cnblogs.com/tonylp/p/4008842.html
Copyright © 2011-2022 走看看