zoukankan      html  css  js  c++  java
  • 由浅到深的分析Javascript OO之写类方式之一:构造函数

    从这篇起,会由浅到深的分析js OO之写类方式,大概会有5-8篇。后面陆续会分析流行库(框架)的写类方式。为了讨论的单一性,暂不考虑类的继承,(私有,受保护)属性或方法。

     

    EMCA262规范中没有类(class)的概念,js的new只是让他看起来更像c++,java一点。这里说的写类,只是书写js代码风格而已。

     

    1、构造函数方式

     

     1 /**
    2 * Person类:定义一个人,有个属性name,和一个getName方法
    3 * @param {String} name
    4 */
    5 function Person(name) {
    6 this.name = name;
    7 this.getName = function() {
    8 return this.name;
    9 }
    10 }

      

     

    这种风格让我们这些写过java的有点亲切在于构造一个对象需要配置一些参数,参数要赋值给类里面this。但与java的区别是js用function来定义类,参数也无需定义类型。

     

    类写好了,我们造几个对象:

     

    1 var p1 = new Person("Jack");
    2 var p2 = new Person("Tom");
    3 console.log(p1 instanceof Person);//true
    4 console.log(p2 instanceof Person);//true

      

     

    控制台输出也证明了p1,p2的确是类Person的对象实例。

    这种方式的优点是:可以根据参数来构造不同的对象实例 ,缺点是构造时每个实例对象都会生成getName方法版本,造成了内存的浪费 。

     

    当然经验丰富的程序员用一个外部函数来代替类方法,达到了每个对象共享同一个方法。改写后的类如下:

    1 //外部函数
    2 function getName() {
    3 return this.name;
    4 }
    5
    6 function Person(name) {
    7 this.name = name;
    8 this.getName = getName;//注意这里
    9 }

    呵呵,有人可能觉得代码风格有点差强人意,怎么看也没有java那么紧凑。但的确可以减少内存的消耗。

  • 相关阅读:
    Github上的英文解释
    快速搭建脚手架的方法
    vue生命周期简介和钩子函数
    vue2.0 路由模式mode="history"的作用
    浅谈vue $mount()
    vue——解决“You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ”
    Vue组件中的父子传值
    URL中的hash(井号)
    大数据-高并发网络基础1
    大数据-6Linux-shell编程
  • 原文地址:https://www.cnblogs.com/liangle/p/2512634.html
Copyright © 2011-2022 走看看