【JavaScript基础系列】决定你的人生能走多远的，是基础。

前言

　　　javaScript门槛非常低，一点语法，一个dom，一个bom就可以使用它开发大部分js应用，再加上现在层出不穷的框架极大的简化抽象了javaScript的使用方式，但是我们始终不能忘记的一点是，决定上层建筑的，是经济基础。 决定你的javaScript能走多远的，是基础。所以我决定在我的博客开一个关于javaScript基础系列。详细得，解读其中的基础，再次刨开它的心脏细细研究。与大家共勉。

第一篇 字符串一

　　 我们从字符串开始介绍。

　　字符串(String)  基础概念：一串有意义的字符集合叫做字符串，在js中使用单引号‘string’ 或者双引号 "string"表示字符串。它是js五个基本类型之一，姑且可以认为它是js基本类型中特性最多的，技巧最多的基本类型。其他的如Number、boolean、null、undefined，其使用方式，引用方法，概念都没有字符串来得多。

　　了解js中的字符串的使用原理

　　一、字符串的表达形式。

　　　　① 通过字面表达式定义的字符串。

　　　　  var str = "这是一串字符串";

　　　　声明了一个变量str ，给这个变量指定值字符串 “”；

　　　　②通过js内置的String构造函数，

 /*****************************
                 通过构造函数定义的字符串，
                 实际上可以叫做字符串对象，
                 在chorme中返回一个字符拆分的对象
 */
                 var str = new String("hello world");
                 console.log(str);

　　二、字符串与字符串对象（为什么普通字符串可以调用构造函数的方法？）。

　　通过字面表达式定义的字符串与通过js内置的String构造函数生成的字符串，它们在使用的时候，行为似乎是一致的，但是，在更正确的表达中，它们是不同的，通过字面表达式我们直接给变量赋予了一个字符串值，而通过构造函数，我们得到的是一个String对象。

　　下图是内置的String构造函数在chorme中返回一个字符拆分的对象：

　　

　　而字面量方式则是：

　　

　　通过对两个方式的typeof对比，我们可以看到：

/*****************************
                通过构造函数定义的字符串，
                实际上可以叫做字符串对象，
                在chorme中返回一个字符拆分的对象
            */
                var str = new String("hello world");
                console.log(str);　　//上图1

            /*****************************
                通过typeof检查的字符串对象，返回了object
            */
                var _type = typeof str;
                console.log(_type)　　//object

            /*****************************
                不使用构造函数，直接赋值呢？
                它就是一个基本值，
                typeOf返回string
            */
                var str1 = "hello world";
                console.log(str1); //上图2

                var _type1 = typeof str1;
                console.log(_type1)　　//string

它们是否相等？答案是不相等,

console.log(str === str1); //false

那么我可以这么简单的理解：new操作符只会返回对象，new String()永远都是一个对象，而对象是不会和字符串相等的。

有一点经验的同学应该可以看出，这里如果使用==的话，str==str1，返回的是true。这是因为js中的类型转换机制决定的，它隐式的调用了字符串对象的valueOf方法。我们可以做一个小实验：

/***************************
                如果我重写str的valueOf方法将它指向一个新的值
            */
            console.log("before ",str == str1);//true
            str.__proto__.valueOf = function(){
                return "javaScript!";
            }
            console.log("after ",str == str1);//false
　　　　　　　console.log(str+str1) //javaScript!hello world

我更改了str的原形对象中的valueOf方法，使它总是返回一个新字符值 "javaScript!"，最后再和str1用==比对的时候，返回了false。

目前为止可以得出结论是，字符串和字符串对象不相等，甚至不是同一个概念，一个是基本类型值，一个是构造函数生成的字符对象，但在js机制中，比较时隐式的使用了valueOf方法，调用拼接时也隐式调用了valueOf方法。

js以这种方式给字符串“继承”了一些方法，能看到的做法是，js在使用字面表达式定义的字符串调用方法时，悄悄的给它包了一层字符串对象的壳。

通过调用__proto__属性就可以看出

//通过调用__proto__属性就可以看出

                console.log(str1.__proto__ === str.__proto__); //true 他们继承的对象是相等的

字符串与字符串对象的使用方式一致，typeof得到的值不同，在使用字面表达式定义的字符串调用方法时，js会隐式调用new String（），这就是为什么基础类型能够调用对象方法的原因。

通过这个理解方式，我们就不难理解为什么一个数字、一个字符串能调用内置方法了。

　三、字符串下标

　　字符串是有下标的。由于上面介绍的字符串与字符串对象的关系，任意字符串都可以通过下标访问到对应的位置的单个字符。下图在chorme中打印的一个字符串对象：

　　可以看到一共11个字符从0到10，需要注意的是它并不是数组。而是一个属性名为0-10的对象。

/*****************************
                 可以通过下标访问字符串字符
                 这里字符串对象和字符串同样能使用下标访问，
                 这是因为javascript编译时，会在适当的时候将字符串包装成字符串对象，
                 这样一般的字符串就也可以调用String构造函数的方法了
            */
                console.log(str[0]); //h
                console.log(str1[0]); //h

我们可以， 通过for循环打印每一个字符，也可以，通过数组的方法借用将字符串转换成数组：

Array.prototype.slice.call(str)
//["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

但是需要注意的是，如果你直接修改str[11] = "!"的话，只会在对象中新增了一个名为11的属性，并不会修改到字符串本身的值。

str[11] = "!";
console.log(str.valueOf()) // hello world  修改失败！

为什么js要这么干？将字符串存储两份，一份是一个一个的对象属性字符集，另一份指向原始值，也就是上图的 [[PrimitiveValue]].。

我觉得它们有一个先后关系，先生成一个一个的对象属性，再由对象属性的一个个字符拼接成 [[PrimitiveValue]]；

单元总结

　　真正的基础是什么？我觉得是它的内在原理，它的实现思路以及实现方式，所以文中并没有给出更多的字符串操作方法，

　　本章介绍了字符串调用方法的来历，介绍了字符串下标的原理。下一章讲什么，待定，博主是一边回顾基础，一边理解，一边写博客，当然也有很多不正确的地方，感谢大家包容，更感谢大家指正。

　　最后

　　==============================================================================================

　　一首诗

　　我想写一首诗，

　　歌颂风，

　　颂唱雨。

　　只是，

　　我的桌子上没有一支笔，

　　诗没有笔可能代表着，

　　也许远方不那么远，

　　它就在笔上飞扬。

　　================================================================================================

　　转载请注明出处。 9月12日划水的下午