JavaScript中的原型链也算是JavaScript中的一个高级话题，一直以来对这块的知识理解地不是特别深刻，现再记录一下这块的学习笔记： 1.从最简单的代码开始：三行代码引出js中的高级话题 function Foo(){}; var foo = new Foo(); 2.我们首先看一下这两行代码在JavaScript中的关系： 641 3.深入剖析： 这两行代码实际上包含了以下三个过程： 3.1：当我们创建一个自定义的函数Foo，该函数就会自动创建一个prototype属性，这个属性指向函数的原型对象； 3.2：原型对象会默认去取得constructor属性，指向构造函数。 第一行代码实际上发生了以上两个过程，我的理解如下： 父类（原型对象）的constructor属性指向子类对象（函数），子类的prototye属性指向了父类（原型对象），这里的原型对象可以表示为Foo.prototype。 3.3：当调用构造函数创建一个新实例foo后，该实例的内部将包含一个指针\_\_proto\_\_，指向构造函数的原型对象。 第二行代码执行后，实际上发生了第三个过程，我的理解如下： 每一个实例对象都有一个\_\_proto\_\_属性（指针），这个属性指向了父类（原型对象），而父类（原型对象）的constructor属性指向了子类（函数），而子类（函数）的prototye属性指向了父类对象。 4.现在来梳理任意一个实例，函数与Object这个对象的关系： 我的理解如下： 只要创建了一个Object,这个就会默认有一个protype属性，这个属性指向了Object的原型对象，而Object的原型对象默认会有一个constructor属性，这个属性指向了Object，但是Object的原型对象已经是原型链的最根部了，所以它没有\_\_proto\_\_属性。因此Object的原型对象的\_\_proto\_\_指针指向为null. 函数看做是一个对象以后，其构造函数就是Function()，原型对象就是Function的原型对象，Object函数看作实例对象的话，其构造函数就是Function()，原型对象是Function的原型对象 也就是函数的原型对象是：Function.prototype, Object的原型对象是：Object.protype 其他核心测试代码如下：  Title /\*如何识别一个对象是什么类型的呢？\*/ // 每一个原型都有自己的prototype都有自己的constructor和toString()方法 console.log(Object.prototype.toString.call("jerry"));// console.log(Object.prototype.toString.call(12));// console.log(Object.prototype.toString.call(true));// console.log(Object.prototype.toString.call(undefined));// console.log(Object.prototype.toString.call(null));// console.log(Object.prototype.toString.call({name: "jerry"}));// console.log(Object.prototype.toString.call(function () { }));// console.log(Object.prototype.toString.call());// console.log(Object.prototype.toString.call(new Date));// console.log(Object.prototype.toString.call(/\\d/));// /\*\* \* 构造函数 \* @constructor \*/ function Person() { }; console.log(Object.prototype.toString.call(new Person));// console.log("jerry".toString());//jerry console.log((1).toString());//1 console.log(.toString());//1,2 console.log(new Date().toString());//Wed Dec 21 2016 20:35:48 GMT+0800 (中国标准时间) console.log(function () { }.toString());//function (){} //console.log(null.toString());//error //console.log(undefined.toString());//error /\* \* 这是因为toString为Object的原型方法， \* 而Array ，function等类型作为Object的实例，都重写了toString方法。 \* 不同的对象类型调用toString方法时， \* 根据原型链的知识，调用的是对应的重写之后的toString方法（function类型返回内容为函数体的字符串，Array类型返回元素组成的字符串.....）， \* 而不会去调用Object上原型toString方法（返回对象的具体类型）， \* 所以采用obj.toString()不能得到其对象类型，只能将obj转换为字符串类型；因此，在想要得到对象的具体类型时，应该调用Object上原型toString方法。 \* \* \*/ obj = new Array(); // 所有的对象实际上是没有自己的toString()方法的，但是由于js中的原型链，导致了每一个对象都有自己的toString()方法，如果直接调用obj.toString()方法 // 会直接把数组里面的所有元素打印出来，如果要检测一个对象是不是数组类型， 需要使用Object的toString()犯法来检测 console.log(Object.prototype.toString.call(obj)) === ''; var arr = ; console.log(Array.prototype.hasOwnProperty("toString"));//true console.log(arr.toString());//1,2,3 delete Array.prototype.toString;//delete操作符可以删除实例属性 console.log(Array.prototype.hasOwnProperty("toString"));//false console.log(arr.toString());//"" // 通过原型链判断是不是数组类型【原理？】 function Foo() { } console.log(Foo.prototype.constructor); // prototype指向了他的原型对象，这个原型对象有一个constructor属性，这个属性指向了他的构造函数 console.log(Foo.prototype); // 每一个Foo都有一个prototype属性，这个属性指向了Foo的原型对象 var foo = new Foo(); console.log(foo.constructor == Foo); // true: foo.constructor指向了他的构造函数（其实就是Foo这个函数） console.log(foo.hasOwnProperty('constructor')); // false: foo本身是没有constructor这个属性的，这个属性实际上是继承于父类的 console.log(foo.\_\_proto\_\_); // 每一个foo的实例都有一个\_\_proto\_\_属性，这个属性指向了他的原型对象（Object） /\*function Object() { } obj = new Object(); console.log(obj.\_\_proto\_\_);\*/ // 指向了他的原型对象 console.log(Object.prototype.constructor); console.log(Object.prototype.\_\_proto\_\_); // null, 由于Object是js内置的根部， \_\_proto\_\_指向了他的原型对象，他的原型对象实际上为null console.log(Object.prototype); // 这是Object的原型对象，但是这个原型对象里面已经没有\_\_proto\_\_属性了 // Valueof() 和 toString()的使用详解------------------------------------------------- // valueOf()方法会将对象转换为基本类型，如果无法转换为基本类型，则返回原对象 var obj = new Boolean(true); console.log(obj.valueOf());//true console.log(typeof obj.valueOf());//boolean //如果是包装类型的基本类型，则返回原基本类型值 var a = true; console.log(a.valueOf());//true console.log(typeof a.valueOf());//boolean /\* \* valueOf()用法小结： 1）undefined和null没有此方法（基本类型肯定没有方法，String、Number和Boolean是因为有对应的基本包装类型，才可以调用方法）； 2）基本包装类型和对应的基本类型，调用valueOf()返回对应的基本类型值； 3）对象类型（除Date类型）返回原对象； 4）Date类型返回表示日期的毫秒数 \* \*/ // oSting()方法返回返回对象的字符串表现----------------------------------------- /\* \* 如果是基本包装类型对应的基本类型，会返回原值。但这并不代表基本类型拥有toString()方法（基本类型不是对象，不拥有任何方法），而是在读取一个基本类型值时，后台会创建一个对应的基本包装类型的对象，从而调用一些方法。所以，基本类型“调用”toString()方法时，实际上是先创建了一个对应的基本包装类型，由此基本包装类型调用toString()最后返回了其对应的字符串，看起来就好像是基本类型调用了toString()方法而得到了对应的字符串。 \* \* \* \* \* 【小结】： 1）undefined和null没有此方法（基本类型肯定没有方法，String、Number和Boolean是因为有对应的基本包装类型，才可以调用方法）； 2）Date类型返回表示时间的字符串； 3）Object类型返回字符串“”。 【与valueOf()对比】 1）toString()和valueOf()的主要不同点在于，toString()返回的是字符串，而valueOf()返回的是原对象 2）由于undefined和null不是对象，所以它们toString()和valueOf()两个方法都没有 3）数值Number类型的toString()方法可以接收转换基数，返回不同进制的字符串形式的数值；而valueOf()方法无法接受转换基数 4）时间Date类型的toString()方法返回的表示时间的字符串表示；而valueOf()方法返回的是现在到1970年1月1日00:00:00的数值类型的毫秒数 5）包装对象的valueOf()方法返回该包装对象对应的原始值 【与转型函数String()函数的对比】 toString()和String()都是将数据转换为对应的字符串，有如下区别： 1）String()可以将任何类型的值转换为字符串，包括undefined和null； console.log(String(null));//"null" console.log(String(undefined));//"undefined" 2）String()不能接受数值基数作为参数 \* \* \*/ // call和apply的使用方法总结----------------------------------------------------------------- window.color = 'red'; document.color = 'yellow'; var s1 = {color: 'blue' }; function changeColor(){ console.log(this.color); } // 注意call()里面传递的参数，就会把这个参数传给调用的函数，此时调用函数的内部里面的this实际上指向了传递过来的这个参数对象 changeColor.call(); //red (默认传递参数) changeColor.call(window); //red changeColor.call(document); //yellow changeColor.call(this); //red changeColor.call(s1); //blue window.firstName = "Cynthia"; window.lastName = "\_xie"; var myObject = {firstName:'my', lastName:'Object'}; function getName(){ // 这个函数内部的this默认指向的是window,通过call和apply可以间接修改这个this的指向 console.log(this.firstName + this.lastName); } function getMessage(sex,age){ console.log(this.firstName + this.lastName + " 性别: " + sex + " age: " + age ); } getName.call(window); // Cynthia\_xie getName.call(myObject); // myObject getName.apply(window); // Cynthia\_xie getName.apply(myObject);// myObject getMessage.call(window,"女",21); //Cynthia\_xie 性别: 女 age: 21 getMessage.apply(window,); // Cynthia\_xie 性别: 女 age: 21 getMessage.call(myObject,"未知",22); //myObject 性别: 未知 age: 22 getMessage.apply(myObject,); // myObject 性别: 未知 age: 22 /\*apply()方法 接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。 语法：apply( \]);，调用一个对象的一个方法，2另一个对象替换当前对象。 说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个 TypeError，如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。 call()方法 第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来。 语法：call(\]\]\]);，应用某一对象的一个方法，用另一个对象替换当前对象。 说明： call方法可以用来代替另一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象，如果没有提供thisObj参数，那么Global对象被用于thisObj。 \* \* \* \*/ function isArray(obj) { // 注意这里的object是小写的哈，否则是检测不出来的哈 return Object.prototype.toString.call(obj) === '' } obj2 = new Array(); console.log(isArray(obj2)); // false console.log(Object.prototype.toString.apply(obj2)); // 使用apply方法同样是可以检测的哈 //数据类型的检测测试-------------------------------------------------------------- /\*\* \* 数据类型检测工具包 \* @constructor \*/ MyTools = function () { } MyTools.prototype = { isStringByApply : function (obj) { return Object.prototype.toString.apply(obj) === '' }, isArrayByCall : function (obj) { return Object.prototype.toString.call(obj) === '' }, isStringByConstructor : function (obj) { return obj.constructor === String }, isBooleanByTypeOf : function (obj) { return typeof obj === 'boolean' } } // 对json格式的深入理解 // 测试结果：json中存储数据的时候，key必须是唯一的，否则后面的会覆盖掉前面的内容哈 var jsonObject = { name : 'xiuxiu', age : 15, name : 'xiugang' } console.log(jsonObject);

【JavaScript框架封装】深入理解原型链中的prototype、__proto__和constructor的关系

【JavaScript框架封装】深入理解原型链中的prototype、proto和constructor的关系