欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

ECMAScript5面向对象技术(1)--原始类型和引用类型

程序员文章站 2022-12-22 09:12:59
概述 大多数开发者在使用Java或C 等基于类的语言的过程中学会了面向对象编程。由于JavaScript没有对类的正式支持，这些开发者在学习JavaScript时往往会迷失方向； JavaScript不需要在开头就定义好各种类，你可以在写代码的过程中根据需要创建数据结 ； 由于JavaScript缺 ......

概述

  • 大多数开发者在使用java或c#等基于类的语言的过程中学会了面向对象编程。由于javascript没有对类的正式支持，这些开发者在学习javascript时往往会迷失方向；

  • javascript不需要在开头就定义好各种类，你可以在写代码的过程中根据需要创建数据结；

  • 由于javascript缺少类，也就缺少用于对类进行分组的包；

  • javascript把对象作为语言的中心，几乎所有javascript的数据要么是一个对象要么从对象中获取；

  • 在javascript中也被视为对象，这使得它们成为javascript的一等公民；

  • 用和理解对象是理解整个javascript的关键，在学习之前，首先要学习鉴别和使用两种javascript基本数据类型：原始类型和引用类型。

什么是类型

  • javascript虽然没有类的概念，但依然存在两种类型：原始类型和引用类型；

  • 原始类型保存为简单数据值；

  • 引用类型保存为对象，其本质是指向内存位置的引用；

  • 其他编程语言使用栈存储原始类型，用堆存储引用类型，javascript完全不同：它使用一个变量对象追踪变量的生存期；

  • 原始值被直接保存在变量对象内，引用值则作为一个指针保存在变量对象内，该指针指向实际对象在内存中的存储位置。

原始类型

javascript共有5种原始类型：

  • boolean 布尔，值为true或false
  • number 数字，值为任何整型或浮点数值
  • string 字符串，值为单引号或双引号括出的单个字符或连续字符
  • null 空类型
  • undefined 未定义

javascript和许多其他语言一样，原始类型的变量直接保存原始值。当你将原始值赋给一个变量时，该值将复制到变量中。也就是说，如果你使一个变量等于另一个时，每个变量有它自己的一份数据拷贝。

var c1 = "red";
var c2 = c1;

ECMAScript5面向对象技术(1)--原始类型和引用类型

每个含有原始值的变量使用自己的存储空间，一个变量的改变不会影响到其他变量。

var c1 = "red";
var c2 = c1;

console.log(c1); //"red"
console.log(c2); //"red"

c1 = "blue";

console.log(c1); //"blue"
console.log(c2); //"red"

鉴别原始类型

鉴别原始类型的最佳方法是使用typeof操作符。

console.log(typeof "hello");  //"string"
console.log(typeof 100);      //"number"
console.log(typeof 10.5);     //"number"
console.log(typeof true);     //"boolean"
console.log(typeof undefined);    //"undefined"
console.log(typeof null)      //"object"

当运行typeof null时，结果是object。这实际上是一个错误，判断一个值是否为空类型的最佳方法是直接和null比较。

console.log(value === null); //true or false

原始方法

  • 虽然string，number，boolean是原始类型，但是它们也拥有方法；
  • 尽管原始类型拥有方法，但它们不是对象；
  • javascript使它们看上去像对象一样，以此来提供语言上的一致性体验。
var name = "tom";
var firsetletter = name.chrat(0); //get first character
var lowercasename = name.tolowercase(); //convert to lowercase

引用类型

  • 引用类型是指javascript中的对象，同时也是在javascript中能找到的最接近类的东西；
  • 引用值是引用类型的实例，也是对象的同义词；
  • 对象是属性的无序列表；
  • 属性包含键和值；
  • 如果一个属性的值是函数，它就被称为方法；
  • 在使用对象前，必须先创建他们。

创建对象

  • javascript有好几种方式可以创建对象，或者说实例化对象；

  • 第一种是使用new操作符和构造函数；

  • 构造函数是通过new操作符来创建对象的函数，一般首字母大写，下列代码实例化一个通用对象；

var object = new object(); //实例化一个通用对象

  • 引用类型不在变量中直接保存对象，所以上面例子中object变量实际上并不包含对象的实例，而是一个指向内存中实际对象所在位置的指针（或者说引用）；

  • 当将一个对象赋值给变量时，实际是赋值给这个变量一个指针。这意味着，将一个变量赋值给另一个变量时，两个变量各获得了一份指针的拷贝，指向内存中的同一个对象。

对象引用解除

不使用对象时将其引用解除，让垃圾收集器对那块内存进行释放。解除引用的最佳手段是将对象变量置为null。

var obj = new object();
obj = null; // 解除引用

添加删除属性

在javascript中，可以在对象中随时添加和删除其属性。

var obj1 = new object();
var obj2 = obj1;

obj1.myproperty = "aaa";
console.log(obj2.myproperty); //"aaa"

上面的例子演示了javascript一个独特的方面：可以随时修改对象，即使并没有在开始时定义它们。同时，后续会讲到如何阻止此类修改。

内建类型实例化

我们已经见过如何用new object()创建和使用通用对象。object类型只是javascript提供的少量内建类型之一。其他内建类型各有它们的特殊用途，可在任何时候被实例化。

  • array 数组类型，以数字为索引的一组值的有序列表
  • date 日期和时间类型
  • error 运行期错误类型
  • function 函数类型
  • object 通用对象类型
  • regexp 正则表达式类型

可以用new来实例化每一个内建引用类型。

字面形式

内建引用类型有字面形式。字面形式允许你在不需要使用new操作符和构造函数显式创建对象的情况下生成引用值（言外之意就是：除了使用new构造函数创建对象还有一种字面形式的方式创建对象）。

对象和数组字面形式

  • 要用对象字面形式创建对象，可以在大括号内定义一个新对象及其属性；

  • 属性的组成包括一个标识符或字符串、一个冒号及一个值；

  • 多个属性之间用逗号分隔；

var book = {
 name:"javascript教程",
 year:"2019",
 price:34.5
}
  • 属性名字也可以用字符串表示，特别是当你希望名字中包含空格或其他特殊字符时；
var book = {
 "name":"javascript教程",
 "year":"2019",
 "price":34.5
}

上面两个例子的等价写法

var book = new object();
book.name = "javascript教程";
book.year = "2019";
book.price = 34.5;
  • 定义数组的字面形式是在中括号内用逗号区分任意数量的值。
var colors = ['red', 'blue', 'green'];
console.log(colors[0]); //'red'

等价于

var colors = new array('red', 'blue', 'green');
console.log(colors[0]);

函数字面形式

  • 通常都要用函数的字面量来定义函数；

  • 考虑到可维护性、易读性和调试上的巨大挑战，通常不会有人使用函数的构造函数。

function fun(value) {
 return value;
}

//is same as
var fun = new function("value", "return value;");

访问属性

  • 属性是对象中保存的名字和值的配对；

  • .是javascript中访问属性的最通用做法；

     var arr = [];
 arr.push(1000);

  • 也可以使用中括号访问javascript属性。

     var arr = [];
 arr["push"](1000);

鉴别引用类型

  • 函数使用typeof操作符时，返回值是function;

  • 非函数的引用typeof操作符时，返回值是object；

  • 为了更方便的鉴别引用类型，使用instanceof操作符；

    对象的引用 instanceof 构造函数

    对象是构造函数所指定的类型的一个实例，instanceof返回true;

    否则返回false。

var items = [];
var object = {};

function fun(val) {
      return val;
}

console.log(items instanceof array);  //true
console.log(object instanceof object);    //true
console.log(fun instanceof function); //true
  • instanceof操作符可鉴别继承类型，这意味着所有对象都是object的实例，因为所有引用类型都继承自object。
var items = [];
var object = {};
  
function fun(val) {
   return val;
}
  
console.log(items instanceof object); //true
console.log(object instanceof object);    //true
console.log(fun instanceof object);   //true

​ 每种引用类型的对象都被正确鉴别为object的实例。

鉴别数组

除了instanceof可以鉴别数组，ecmascript5引入了array.isarray()来明确鉴别一个值是否为array的实例。

原始封装类型

  • 原始封装类型共有3种（string、number、boolean），这三种是引用类型;
  • 这些引用类型使得原始类型用起来和对象一样方便（类似于java中的包装类）；
  • 当读取字符串、数字或布尔值时，原始封装类型将被自动创建；
var name = "tom";
var firstchar = name.charat(0);
console.log(firstchar);

​​ 等价于

var name = "tom";
var temp = new string(name);
var firstchar = temp.charat(0);
temp = null;
console.log(firstchar);
  • 手动创建的原始封装类型在其他地方很容易让人误解，在大多数情况下都只会导致错误。多数情况下，应避免使用原始封装类型。

上一篇： JavaScript深入浅出第4课：V8引擎是如何工作的？

下一篇： go 指针 通过指针修改int类型的值

推荐阅读