JavaScript对象，函数，prototype,constructor总结

最近看前端代码学习js和react，本来觉得基本的Js语法会就可以了，但是感觉这样学习react是真的吃力还混淆。所以阅读了一些博客写一点参考的学习心得。只记录混淆部分，如果有和我一样迷糊的人可以看看。这篇是一边看博客一边写代码测试的，感觉准确度应该没啥问题
ps:是__proto__ 但是由于markdown显示，可能有的地方是proto
学习资料：
http://reng99.cc/2018/04/05/prototype-object-chain-md/
https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor
https://www.cnblogs.com/jikey/archive/2010/04/28/1722971.html

函数是特殊的对象

var str="js is so interesting";
var num=10;
var arr=new Array();
var obj={degree:"hard"};
function f(){};
var ff=new f();
//他们是什么类型？内置类型，函数类型等
typeof(str);//string
typeof(num);//number
typeof(arr);//object,这里Array需要注意同时多看
typeof(obj);//object
typeof(f);//function
typeof(ff);//object

思考：从typeof看函数定义的对象和函数作为构造函数构造的对象他们的类型，来区分这两个看起来很像但是完全不一样的对象
function f(){…}函数对象，本质函数，构造函数Function()。这是第一层，constructor指向构造函数，有prototype属性，指向prototype对象
var ff=new f();函数作为构造函数，new构建返回一个对象。没有prototype属性，constructor指向构造函数，即f，这是第二层

typeof(Function);//function 对象构造器
typeof(new Function());//function！！！ 
typeof(new f());//object
typeof(Array);//function 对象构造器
typeof(Object);//function 对象构造器
typeof(new Object());//object

体会对象构造器，以及函数是特殊的对象。new 函数返回的是函数，同时构造函数也是Function( )

constructor属性的理解

//关于constructor的理解：constructor属性值是对构造函数的引用
console.log(str.constructor);//function String(){[native code]}
console.log(num.constructor);//function Number(){[native code]}
console.log(arr.constructor)//function Array(){[native code]}
console.log(obj.constructor);//function Object(){[native code]}
console.log(f.constructor);//他是函数！function Function(){[native code]}
console.log(ff.constructor);//他是对象，构造函数是一个函数对象！//function f(){}

constructor属性指向自己的构造函数。
Number:1,String:“test”,Boolean:true的constructor属性值是只读的，无法修改。

prototype属性的理解

console.log(str.prototype);//undefined 说明一般对象并没有这个属性，他们有__proto__
console.log(num.prototype);//undefined 说明一般对象并没有这个属性，他们有__proto__
console.log(arr.prototype);//undefined 说明一般对象并没有这个属性，他们有__proto__
console.log(obj.prototype);//undefined 说明一般对象并没有这个属性，他们有__proto__
console.log(f.prototype);//[Object Object] 
console.log(ff.prototype);//undefined
console.log(f.prototype.constructor);//function f(){}三者关系
console.log(ff.constructor===f.prototype.constructor)//true

对prototype属性的理解
对prototype属性的理解:prototype属性，是函数独有的,因为当你用function f(){}定义得到一个函数，此时为这个函数添加这个属性，这个属性指向prototype对象。prototype对象里包含constructor属性，这个属性保存指向函数的一个引用
就像是绕了一圈又回来了f.prototype.constructor指向自己==ff.constructor

对__proto__属性的理解

首先拥有prototype这个属性的有：Function String,Number,Object，function f(){…}…其他都是undefined,用hasOwnProperty(“prototype”)也是false
官方定义了所有对象除了null拥有prototype属性，这个属性指向原型对象的内存堆，递归，形成原型链，最终指向Object.prototype但是用__proto__来访问这个属性，这是浏览器做的一种实现，用hasOwnProperty(“proto”)也是false
此处思考：
__proto__与prototype这两个属性的关系？
拥有者？
含义？

console.log(typeof(str.__proto__));//object
console.log(str.__proto__===String.prototype);//true
console.log(str.__proto__===Object.prototype);//false
console.log(typeof(num.__proto__));//object
console.log(num.__proto__===Number.prototype);//true
console.log(num.__proto__===Object.prototype);//false
console.log(typeof(arr.__proto__));//object
console.log(arr.__proto__===Array.prototype);//true
console.log(arr.__proto__===Object.prototype);//false
console.log(typeof(obj.__proto__));//object
console.log(obj.__proto__===Object.prototype);//true
console.log(obj.hasOwnProperty('prototype'));//false
console.log(obj.hasOwnProperty('__proto__'));//false
console.log(typeof(f.__proto__));//function 再次体现函数的特殊 指向原型对象Function
console.log(f.__proto__===Function.prototype);//true
console.log(f.__proto__===Object.prototype);//false
console.log(f.__proto__.__proto__===Object.prototype);//true
console.log(typeof(ff.__proto__));//object 
console.log(ff.__proto__===Function.prototype);//false
console.log(ff.__proto__===Object.prototype);//false
console.log(ff.__proto__===f.prototype);//true 破案了！！！ 他的原型对象是构造他的函数对象！！！
//f.prototype又指向f的prototype对象

__proto__指向构造函数的原型对象，这个属性值的type是对象，他是什么类型就指向什么xxx.prototype，xxx是其构造函数！
Xxx.prototype在我看来就是指Xxx这个类型，这个原型
console.log(ff.proto===f.prototype);
构造函数是f,指向构造函数的原型对象，刚好函数是有prototype属性，prototype属性指向prototype对象。所以即f.prototype

原型链

//原型对象之间的关系
console.log(String.prototype.__proto__===Object.prototype);//true 
//所以怎么理解String.prototype，他是一个对象，他是原型对象，用__proto__属性指向他的原型
console.log(Number.prototype.__proto__===Object.prototype);//true 
console.log(Array.prototype.__proto__===Object.prototype);//true 
console.log(Object.prototype.__proto__===Object.prototype);//false 
console.log(Function.prototype.__proto__===Object.prototype);//true
console.log(Object.prototype.hasOwnProperty('__proto__')); // true
console.log(Object.prototype.__proto__===null); // true

从这也看出各类型之间的关系了。终点是Object.prototype（其实是null，从无到有，到万物。停在最初的Object.prototype就好）

现在总结一下这几小段学习：

1. prototype属性都有谁拥有？
   函数，String，Object…
2. 如何理解prototype属性？xxx.原型对象我觉得就是指这个类型的原型，可以理解为这个类型
   String.prototype=String这个类型
   理解为自己这个类型（原型）
   不过函数的prototype要重点理解一下,真的很难理解！但是一定要记住。他只想原型对象，这个对象很迷，这个对象的构造函数又指向自己

function f(){};
var f1=new f();
console.log((f.prototype.constructor));//function f(){}
console.log(Function.prototype.constructor)
//function Function() { [native code] }
console.log(f1.prototype);//undefined

3. 如何理解__proto__属性？
   指向原型对象，typeof（属性值）是Object或Function(因为原型是函数或者某个类型，再次验证了函数是特殊的对象！！！)
   new生成的类型.prototype=这个对象.proto
   说出以下几个对象的原型链：

function f(){}
// Function.prototype——>Object.prototype
var f1=new f();
//f.prototype——>Function.prototype——>Object.prototype
var str="sss";
//String.prototype——>Object.prototype

读取实例的属性

沿着原型链，从实例到原型…一直查找
这里借用博客一位大神的代码和图总结，简单易懂

function Person(name){
	this.name = name;
}
Person.prototype.sayName = function(){
	console.log(this.name);
}

var person = new Person("嘉明");
person.age = 12;
person.sayName(); // "嘉明"
console.log(person.name.toString()); // "嘉明"

var another_person = new Person("jiaming");
another_person.sayName();

摘抄一些博客里非常经典的几句

Function是所有函数对象的基础，而Object则是所有对象（包括函数对象）的基础。在JavaScript中，任何一个对象都是Object的实例，因此，可以修改Object这个类型来让所有的对象具有一些通用的属性和方法，修改Object类型是通过prototype来完成的。（我的理解：他是在原型上修改，通用，且对所有）

当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（ object ）都有一个私有属性（称之为 proto ）指向它的构造函数的原型对象（prototype ）。该原型对象也有一个自己的原型对象( proto ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。