Javascript的面对对象的理解 【上】（prototype，函数和对象等概念）

首先先生明一下JavaScript面对对象和Java，c#这种高级语言的面对对象有很较大的不同。

JavaScript在面对对象“继承”的时候，可以动态的修改修正。换句话说可以动态的继承，在执行的过程中可以随时的修正继承关系，属性等。然而Java等高级语言的面对对象在声明类的同时，就要确定继承方式，如同模具一样，你一旦选择了模具就不能再次修改了。

之所以JavaScript中你可以自由的“捏制”你想要的对象，在于JavaScript中有prototype（原型）提供给开发者。

JavaScript中声明对象的常见的几种方式：

var obj = {

 name:'jack',

age : 20,

run : function()

{

alert(this.name);

}

}

var obj =  new Object();

obj.name = 'jack';

obj.age = 20;

obj.run = function()

{

alert(this.name);

}

上面两种方式我们也经常看到，但是对于JavaScript声明类，还是较为常用function关键字，也是较为官方正式的方式。

function Father (){

 var name = 'jack';

var age 20;

var run = function()

{

 alert(name);

}

}

var f = new Father();  //声明对象

那么这里就需要说明函数和对象是什么关系？

在这里我先总结一下下面讲述的主旨：在JavaScript中对象最终源于函数的产生的，但是函数又有对应的对象原型（Object），但是函数又最终是Function构造器创建的。看了我这段话的总结似乎很是眩晕，那么慢慢看接下来的解析吧。

解析之前，先说下我们的老朋友，typeof() 这个方法可以让我们看到类型。

function Foo(){
console.log("F run");
}
var obj  = new Object();
var f = new Foo();
console.log(typeof(obj));
console.log(typeof(f));

说明new object 和new function 都是对象类型。（只要调用new 在JavaScript中都是创建一个对象）为什么呢？

那么我们需要了解Object和function都有prototype属性，Object的prototype属性是空（这个一定要记住），function的prototype属性指向object；prototype是什么我们稍后再讲。

图中_proto_是隐式的，js就是通过它指向的object，于是才有了自己的prototype。看看object在js中怎么定义的：

console.log(Object);

正好解释了上图中object是函数类型，所以说object也是诞生于函数，也是用函数声明的；所以js中函数是面对对象的根源，也是类的构造器。

看完这个图，你可能对两个东西产生好奇，分别是prototype和constructor。先说prototype；它是原型链指针或者引用，是js寻找上级类对象的指针，将继承的关系连接起来。constructor是构造器，是创建函数或者类对象的构造器。接下来分析函数和object的构造器：

console.log(typeof(Foo.constructor));
console.log(Foo.constructor);

函数的constructor是函数类型，且是Function，Function是js中函数的构造器。（注意是大写的）

那object呢？

var obj  = new Object();
var f1 = new Foo();
console.log(typeof(f1.constructor));
console.log(f1.constructor);

可见object  f1是类Foo创建的，那么构造器是Foo函数，是函数类型。由上面的说明，Foo的构造器是Function，由Function创建。

var obj  = new Object();
console.log(typeof(obj.constructor));
console.log(obj.constructor);

object的构造器也是函数类型 -- 可见所有的构造器都是函数类型；且是Object()函数。那么是不是Object()函数也应该存在构造器，也应该是Function这个最基本的构造器吧。

console.log(typeof(Object.constructor));
console.log(Object.constructor);

完全说对了，Object函数也是来源于Function，这也完全说明了，Function是js中一切类与对象以及函数的来源。

那么Function有自己的prototype属性吗？有自己的constructor吗？

console.log(Function);
console.log(Function.constructor);

可见Function 的constructor是自身。

console.log(Function.prototype);

Function 的prototype是指向自己构造空function。

function Foo(){
console.log("F run");
}


var f = new Foo();
console.log(typeof(obj));
console.log(Foo.prototype);

浏览器输出的日志截图：

从输出的日志展示的constructor和prototype属性可以证明上面的流程图。

总结

以上是生活随笔为你收集整理的Javascript的面对对象的理解 【上】（prototype，函数和对象等概念）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。