深入理解JavaScript函数、构造函数、对象、prototype(原型对象)的关系。

学了这么久前端,一直搞不明白函数与对象之间的关系,实在惭愧,是时候总结一下了。。以下是学习时的记录,若有错误之处,请指出。。

首先我们要知道js中的数据类型有以下几种:

Number   Boolean   undefined     Object   Function    String  Null  Array 

基本类型:Number Boolean  String  undefined null  

引用类型:Object  Function Array 

什么是对象?根据W3C上面的解释JS中万物皆对象,对象是拥有属性和方法的数据,由此可以看出基本数据类型不是对象(number、string、Boolean、Undefined、null.),剩下的引用类型(Object  Function Array )都是对象

下面我们来测试一下

1.函数是对象  

function test() {};
console.log(typeof(test));    //    function
function test() {};
console.log(test instanceof Object);    //    true

2、对象都是通过函数创建的

function test() {
    this.name="小明"
};
var test2=new test();
console.log(typeof(test));//function
console.log(typeof(test2));//object
console.log(test2 instanceof Object);//true

以上的列子就是通过构造函数创建的对象。

何为构造函数?官方这样定义:是一种特殊的方法。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中

构造函数的特点:

    a:构造函数的首字母必须大写,用来区分于普通函数

    b:内部使用的this关键字,来指向即将要生成的实例对象

    c:使用New来生成实例对象

这个例子可以说明对象可以被函数创建。那为什么要说对象都是通过函数创建的,那对象字面量是不是也是通过函数来创建的,答案是肯定的,这是一种语法糖方式。举个简单的例子

var obj={
    name:'子谦',
    age:'25'
}
//其实等同于
var obj=new Object()
    obj.name='子谦';
    obj.age='25'

//上面的对象字面量其实是通过下面的构造函数来创建的。而其中的Object是一种函数:
console.log(typeof Object)    //function

通过上面的简单例子我们可以得出一个结论:对象是通过函数创建的,而函数又是一种对象。那么这是为什么呢?这就牵扯到prototype原型。

每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。我们也可以通过prototype向新创建的对象添加属性和方法。

    function test() {
        this.a = '我是对象本身就有的属性';
      }
      let test1 = new test();
      text.prototype.b = '我是通过原型对象挂载的属性';
      console.log(test1);
      console.log(test1.b)

以上第二段代码演示了函数(Function)这个特殊的对象,除了和其他对象一样有_proto_对象之外,还有自己特有的对象——原型对象(prototype)这个对象的用途就是包含所有实例共享的属性和方法。原型对象也有一个属性,叫做constructor,这个属性包含了一个指针,指回原构造函数。

下面就用一句话来总结一下JS构造函数、原型对象和实例对象的关系

”每个构造函数都有一个原型对象,

原型对象都包含一个指向构造函数的指针,

实例都包含一个指向原型对象的内部指针。”

                        ——此段话摘自《JavaScript高级程序设计》。

这段话的详细介绍请参考https://blog.csdn.net/u012443286/article/details/78823955
 

猜你喜欢

转载自blog.csdn.net/qq_41629498/article/details/84183963
今日推荐