zoukankan      html  css  js  c++  java
  • JS入门篇-万物皆对象

        万物即是对象,这是我看《悟透javascript》第一部分最强烈的印象。接下来我来理一下书中第一部分的脉络。

        书中告诉我们,在编程的世界里就是数据和实现的逻辑,接下来讲了在JS中,万物皆是对象,包括函数function本质上也是一种对象。JS虽然也是一种面向对象的语言但是不像C++ java等面向对象语言具有类这个概念,书中给出的解释特别有意思。以自然界为例子,类这个概念是我们人类根据自然界的各种生物进行划分提出的概念,自然界本来就没有类这个概念的,有的仅仅只是各种生物进化的对象,所以javascript没有类这个概念显得多么地符合自然变换的规律。既然JS中都是对象,那么JS是如何创建对象的呢?

    JS是如何创建对象的?

    书中介绍JS创建对象其中的两种方式:一、new 一个函数,之前说过函数是一个对象,new一个函数并把该函数赋值给一个对象,比如 var Obj1 = new function(){......},背后实现的原理便是先创建一个对象,并把这个对象作为this参数从而调用后面的函数;二、JSONjavascript object notationjavascript对象标记法,其实学过python的朋友都知道一种叫做字典的东西,json本质上就是一种字典,里面储存的属性和方法都是用字典的方式来存储,用一对大括号括起来一个空字典,同时也是一个空对象,用逗号分隔开每个属性和方法,用冒号来定义字典内每一个项内容,左侧是key,用来访问右侧的值,比如

    var person{

    "name": "jack",

    "age":"22",

    “sayhello":function(){alert("hello world")}

    }

     除了可以表示对象外,JSON 还可以表示数组,这时用的是方括号[]而不是花括号了{}.我们可以采用person.name也可以采用person[“name”]来获取我们想要的对象数据。

    怎样创建一个对象更节省成本?

        我们知道创建一个对象肯定是要占据一定的空间和资源的,在JS中也一样,JS每创建完一个对象后便会对每一个对象的数据和函数创建一个副本,这个做法无疑会造成大量的资源浪有些浪费。我们知道对象数据是私有的,每个对象有数据副本是无可厚非的,但是对于函数来说,有时候不同的对象间,可能数据是不同的,但是函数的实现逻辑是一样的,这个时候就会产生很多实现相同逻辑的代码副本,但这并不是我们想要的。那么要解决这个问题有没有什么方法呢?答案当然是有的,书中提到JS提供的两种解决方案:一:在对象外定义唯一的函数体,该函数体保存的数据占据一块空间,在对象定义时,用this指向它,所有对象建立时便都指向这一块空间,也就不再创建副本了。 比如:

     function sayHello(){

         alert("hello world");

    }

    function  Person(name){

         this.name = name;

          this.sayHello= sayHello();

    }

    var BillGate = new Person("BillGate");

    var SteeveJobs = new Person("steeveJobs");

    alert(BillGate.sayHello == SteeveJobs.sayHello);//true     

    二:采用prototype属性,在JS中所有的function类型对象都具有prototype属性,prototype属性本身又是一个对象,可以任意添加属性和方法。对象是可以访问和调用定义在prototype上的属性和方法的,也就是说prototype实现对象属性和方法的访问共享机制,因而方案二如下

     function Person( name){

           this.name = name;

    }

    Person.prototype.sayHello = function(){

          alert("hello world");

    }

    var BillGate = new Person("BillGate");

    var SteeveJobs = new Person("steeveJobs");

    alert(BillGate.sayHello == SteeveJobs.sayHello);//true  

         prototype属为何性如此神奇,而prototype又是如何实现共享的呢?那么就不得不介绍prototype背后庞大的家族势力类。

    神秘PROTOTYPE家族   

        每个对象都有prototype属性,这个我们知道,除了这一点一外,prototype其实还有一个家族,也就是我们常说的原型链。在JS,只有function对象具有prototype属性,除了它以外的对象(object对象除外)只有_proto_属性,所谓的原型链本质上就是每个_proto_这个指针串起来的指针链,链的末尾处是objectprototype属性,值为null。具体可以看一个大神的原型链的文章http://www.cnblogs.com/libin-1/p/5820550.html

         说到家族会让我们想到什么?除了巨额的财产,那就是离不开的继承了。在JS中也就是所谓的原型继承,实现的方法就是,让子类的构造函数的propertype属性指向它的父类实例,比如书中的例子

    function Person( name){  //基类构造函数

           this.name = name;

    }

    Person.prototype.sayHello = function(){

          alert("helloI am "+this.name );

    }

    function Employee(name,salary){  //子类构造函数

            Person.call(this.name);  //调用基类构造函数

            this.salary = salary;

    }

    Employee.prototype = new Person() //建立一个基类的对象作为子类的原型对象(原型继承)

    Employee.prototype.showMoney = funcion(){

             alert(this.name+"'s  salary is"+"$"+this.salary);

    }

    var BillGate = new Person("BillGate");

    var SteeveJobs = new Employee("steeveJobs",1234);

    BillGate.sayHello();

    steeveJobs.sayHello();

    steeveJobs.showMoney();

        家族每个孩子各有个性,这个也就是我们说的多态,可以通过重写来实现多态性,重写之后的变化只针对特定的对象并不影响原来原型链上的属性和方法。

    unction Person( name){  

           this.name = name;

    }

    Person.prototype.company = "Banana"

    Person.prototype.sayHello = function(){

          alert("hellomy company is  "+this.company );

    }

    var BillGate = new Person("BillGate");

    var SteeveJobs = new Person("steeveJobs");

    steeveJobs.company = "Apple"

    steeveJobs.sayhello = function(){

          alert("my company is"+this.company+",Iphone is our product");

    }

    BillGate.sayHello();//hello,my company is Banana  默认prototype属性

    steeveJobs.sayHello();//my company is Apple,Iphone is our product 多态性

        既然prototype有如此神奇的魔力,聪明的你一定想到我们是不是可以为我们JS库对象增加一些属性和方法来方便我们日常的工作呢,答案当然是肯定的,现在这个大家族中产生一些非常有名望的家族比如大名顶顶的AJAX,就是通过prototype扩展JS内部的功能。

  • 相关阅读:
    hdu5587 BestCoder Round #64 (div.2)
    hdu5569 BestCoder Round #63 (div.2)
    hihocoder1257(构造)(2015北京ACM/ICPC)
    hihocoder 1249(2015ACM/ICPC北京)
    hihocoder1258(水)(2015ACM/ICPC北京站)
    hihiocoder 1255(搜索)(2015ACM/ICPC北京站)
    习题9-8 uva1631
    习题9-8 Uva1632
    Orz
    习题9-6 uva 10723
  • 原文地址:https://www.cnblogs.com/meowding/p/7656967.html
Copyright © 2011-2022 走看看