JavaScript Day07 JavaScript面向对象详解 1

简介: JavaScript Day07 JavaScript面向对象详解

1.内置对象及内置函数

1.1.基本包装类型

在 ES 中,数据的分类分为基本数据类型和引用类型。

而基本包装类型,严格来说不属于上面两个中的任意一个,但是又和这两种类型息息相关。

基本数据类型和引用类型这两个类型其中一个很明显的区别是,引用类型有自己内置的方法,也可以自定义其


他方法用来操作数据,而基本数据类型不能像引用类型那样有自己的内置方法对数据进行更多的操作。


但基本数据类型真的没有吗?


对于部分基本类型来说确实是这样的。


按照最新 ES 标准定义,基本数据类型(primitive value)包括 Undefined, Null, Boolean, Number, Symbol, String。


为了便于操作基本类型值,ECMAScript提供了3个特殊引用类型(基本包装类型):Boolean, Number, String。


基本包装类型,和其他引用类型一样,拥有内置的方法可以对数据进行额外操作。


每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型对象,从而可以调用一些方法操作这些数据。


比如:

var str = 'test';
//substring(start,end),截取从start到end的字符串,不包括end。
var str2 = str.substring(2);
console.log(str2);

上面 str 变量存储的值是一个字符串,‘test’ 字符串是基本数据类型 String 类型的值。然而它调用了substring


方法,并将结果保存在了str2中。


为什么它不是对象却能调用对象的方法呢?


在执行第二行代码时,JS会自动进行下面的步骤:


1.自动创建 String 类型的一个实例(和基本类型的值不同,这个实例就是一个基本包装类型的对象)


2.调用实例(对象)上指定的方法


3.销毁这个实例

//用 String 构造函数创建一个实例,这个实例是一个对象
var str = new String('test')
//对象中有内置方法供开发人员调用
var str2 = str.substring()
// 销毁这个实例
str = null
//虽然基本类型的值没有方法可以调用,但是后台临时创建的构造函数实例(也就是对象)上有内置方法可以让我们对值进行操作,因此这样我们就可以对字符串、数值、布尔值这三种基本数据类型的数据进行更多操作,这也是基本包装类型的主要用处:便于操作基本类型值。

经过上面的加工后,基本字符串变的跟对象一样,上面这三个步骤也适用于Boolean、Number类型。

1.1.1 JS什么时候会自动创建一个对应的基本包装类型对象呢?

取决于当前执行的代码是否是为了获取他的值。每当读取一个基本类型的值,也就是当我们需要从内存中获取

到它的值时(这个访问过程称为读取模式),这时,后台就会自动创建一个基本包装类型的对象。

var str = 'hhh'
console.log(str) //读取模式,后台自动创建基本包装类型对象
var str2 = str   //赋值给变量 str2,也需要读取 str 的值,同上

1.1.2 引用类型和基本包装类有什么不同呢?最主要的区别就是对象的生存期。

  • 引用类型:使用new操作符创建的引用类型实例,在执行流离开当前作用域之前一直都保存在内存中
  • 基本包装类型:只存在一行代码的执行瞬间,然后立即销毁
var str = 'test'
str.test = 'hhh'
console.log(str.test) //undefined

上面第二行代码给自动创建的 String 实例对象添加了 test 属性,虽然此刻代码执行时他是生效的,但是在这行代码执行完毕后该 String 实例就会立刻被销毁,String 实例的 test 属性也就不存在了。

当执行第三行代码时,由于是读取模式,又重新创建了新的 String 实例,而这个新创建的 String 实例没有 test 属性,结果也就是 undefined。

1.1.3 怎么才能给基本类型添加方法或者属性呢?

增加对应的包装对象的原型方法

//给字符串添加属性或方法  要写到对应的包装对象的原型下才行
var str = 'hello';
String.prototype.last = function(){
  // 返回指定位置的字符
  return this.charAt(this.length - 1);
};
console.log(str.last()); // o 执行到这一句,JS会偷偷做一些事情
// 相当于
// 1.找到基本包装对象,new一个和字符串值相同的对象,
// var str = new String('hello');
// 2.通过这个对象找到了包装对象下的方法并调用 
// str.last();  
// 3.这个对象被销毁
// str = null; 

使用new运算符创建String对象

// new运算符
var str = new String('hello');
// 有效属性
str.name = 'HI';
// 有效方法
str.age = function () {
  return 100;
}
console.log(str); //[String: 'hello'] { name: 'HI', age: [Function] }
console.log(typeof str); //object
console.log(typeof str.valueOf()); // 重写valueOf()方法,返回对象表示的基本字符串值
console.log(str.name);  // HI
console.log(str.age()); // 100

注意:

在使用 new 运算符创建String,Number,Boolean三种类型的对象时,可以给自己添加属性和方法;或增加对应的包装对象的原型方法;但我们建议不要这样使用,因为这样会导致根本分不清到底是基本类型值还是引用类型值。

1.2.Boolean类型

Boolean 类型没有特定的属性或者方法。一般直接将Boolean当做一个工具方法来使用。

1.3.Number类型

内置属性(静态属性,直接调用即可)

属性 描述
MAX_VALUE 可表示的最大的数。
MIN_VALUE 可表示的最小的数。
NaN 非数字值。
NEGATIVE_INFINITY 负无穷大,溢出时返回该值。
POSITIVE_INFINITY 正无穷大,溢出时返回该值。
prototype 使您有能力向对象添加属性和方法。

内置方法(对象方法)

方法 描述
toString 把数字转换为字符串,使用指定的基数。
toLocaleString 把数字转换为字符串,使用本地数字格式顺序。
toFixed 把数字转换为字符串,结果的小数点后有指定位数的数字。
toExponential 把对象的值转换为指数计数法。
toPrecision 方法可在对象的值超出指定位数时将其转换为指数计数法。
valueOf 返回一个 Number 对象的基本数字值。

toString 把数字转换为字符串,使用指定的基数。

var num = 123;
console.log(num.toString()); //123

toLocaleString 把数字转换为字符串,使用本地数字格式顺序。

var num = 123;
console.log(num.toLocaleString()); //123

toFixed 把数字转换为字符串,结果的小数点后有指定位数的数字。

var num = 123;
console.log(num.toLocaleString()); //123

toExponential 把对象的值转换为指数计数法。科学计数法

var num = 123;
console.log(num.toExponential()); // 1.23e+2

toPrecision 方法可在对象的值超出指定位数时将其转换为指数计数法。

var num = 123;
console.log(num.toPrecision(2)); // 1.2e+2

valueOf 返回一个 Number 对象的基本数字值。

var num = 123;
console.log(num.valueOf()); // 123 number

1.4.String类型

1.4.1 对象属性

属性 描述
constructor 对创建该对象的函数的引用
length 字符串的长度
prototype 允许您向对象添加属性和方法

String 也包含对象的通用方法,比如 valueOf()、toLocaleString()和 toString()方法,但这些方法都返回字符串的基本值。

1.4.2 字符方法

方法 描述
charAt(index) 返回指定索引位置的字符
charCodeAt(index) 以Unicode编码形式返回指定索引位置的字符

charAt(index) 返回指定索引位置的字符。

index,必需。表示字符串中某个位置的数字,即字符在字符串中的下标。

var str = 'hello';
console.log(str.charAt(0)); // h

charCodeAt(index) 以Unicode编码形式返回指定索引位置的字符

index,必需。表示字符串中某个位置的数字,即字符在字符串中的下标。

var str = 'hello';
console.log(str.charCodeAt(0)); // 104

1.4.3 字符串操作方法

方法 描述
concat() 连接字符串。
slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
substring() 提取字符串中两个指定的索引号之间的字符。
substr() 从起始索引号提取字符串中指定数目的字符。

concat(str1,str2…strx) 连接字符串。

str1,str2…strx 将要被连接的字符串

与Array.prototype.concat类似**

var str = 'hello';
console.log(str.concat('world', 'hello', 'javascript')); // helloworldhellojavascript

slice(start,end) 提取字符串的片断,并在新的字符串中返回被提取的部分。


返回字符串start到end(不包括end)之间位置的字符串,start和end可以为负数。

var str = 'hello';
console.log(str.slice(0,3)); // hel

substring(start,end) 提取字符串中两个指定的索引号之间的字符。

返回字符串start到end(不包括end)之间位置的字符串,start和end不可以为负数,没有end的话,提取剩余全部。

var str = 'hello';
console.log(str.substring(0, 3)); // hel
console.log(str.substring(0)); // hello
-substr(start,length) 从起始索引号提取字符串中指定数目的字符。
-返回字符串start(可以为负数)开始的length个字符串
var str = 'hello';
console.log(str.substr(0, 3)); // hel
-字符串位置方法
方法 描述
indexOf(str,n) 从n开始搜索第一个str,并将搜索的索引值返回
lastIndexOf(str,n) 从n开始搜索的最后一个str,并将搜索的索引值返回
-indexOf(str,n) 从n开始搜索第一个str,并将搜索的索引值返回
-n为可选的整数参数,合法取值是 0 到 string.length - 1。如省略该参数,则将从字符串的首字符开始检索。
var str = 'hello world';
console.log(str.indexOf('l')); // 2
-lastIndexOf(str,n) 从n开始搜索的最后一个str,并将搜索的索引值返回
-n为可选的整数参数,合法取值是 0 到 string.length - 1。如省略该参数,则将从字符串的首字符开始检索。
var str = 'hello world';
console.log(str.lastIndexOf('l')); // 9
-两者如果都没有找到,则返回-1.

大小写转换方法

方法 描述
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
toLocaleLowerCase() 把字符串转换为小写。本地化
toLocaleUpperCase() 把字符串转换为大写。本地化
var str = 'hello world';
// 转换为大写
console.log(str.toUpperCase()); //HELLO WORLD
// 转换为小写
console.log(str.toLowerCase()); //hello world
-字符串的模式匹配方法
方法 描述
match() 找到一个或多个正则表达式的匹配。
replace() 替换与正则表达式匹配的子串。
search() 检索与正则表达式相匹配的值。
split() 把字符串分割为字符串数组。

正则表达式在字符串中的应用,在前面的章节已经讲过。以上 match()、replace()、serach()、split()在普通字符串中也可以使用。

var str = 'HELLO World';
console.log(str.match('L'));//找到 L,返回 L 否则返回 null
console.log(str.search('L'));//找到 L 的位置,和 indexOf 类似
console.log(str.replace('L', 'Q'));//把 L 替换成 Q
console.log(str.split(''));//把字符串分割为字符串数组。
目录
相关文章
|
7月前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(三)
深入JS面向对象(原型-继承)
55 0
|
7月前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
65 0
|
6月前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
153 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
7月前
|
前端开发 JavaScript
前端 JS 经典:Class 面向对象
前端 JS 经典:Class 面向对象
39 1
|
7月前
|
JavaScript 前端开发
JavaScript 原型链继承:掌握面向对象的基础
JavaScript 原型链继承:掌握面向对象的基础
|
7月前
|
JavaScript 前端开发 API
在Node.js上使用dojo库进行面向对象web应用开发
请注意,虽然这个例子在Node.js环境中使用了Dojo,但Dojo的许多功能(例如DOM操作和AJAX请求)在Node.js环境中可能无法正常工作。因此,如果你打算在Node.js环境中使用Dojo,你可能需要查找一些适用于服务器端JavaScript的替代方案。
69 0
|
7月前
|
JSON JavaScript 前端开发
深入JS面向对象(原型-继承)(四)
深入JS面向对象(原型-继承)
50 0
|
7月前
|
设计模式 JavaScript 前端开发
深入JS面向对象(原型-继承)(二)
深入JS面向对象(原型-继承)
68 0
|
7月前
|
设计模式 前端开发 JavaScript
深入认识:JavaScript中的面向对象
深入认识:JavaScript中的面向对象
57 0
|
7月前
|
Web App开发 JavaScript 前端开发
深度刨析 JavaScript 模拟面向对象的内部机制
深度刨析 JavaScript 模拟面向对象的内部机制
100 0