基于js中的原型(全面讲解)

程序员文章站 2022-04-28 23:37:43

在讲js的原型之前，必须先了解下object和function。 object和function都作为js的自带函数，object继承自己，funtion继承自己，obj...

在讲js的原型之前，必须先了解下object和function。

object和function都作为js的自带函数，object继承自己，funtion继承自己，object和function互相是继承对方，也就是说object和function都既是函数也是对象。

console.log(function instanceof object); // true
console.log(object instanceof function); // true

object 是 function的实例，而function是它自己的实例。

console.log(function.prototype); // ƒ () { [native code] }
console.log(object.prototype);  // object

普通对象和函数对象

javascript中万物皆对象，但对象之间也是有区别的。分为函数对象和普通对象。

函数对象可以创建普通对象，普通对象没法创建函数对象，普通对象js世界中最低级的小喽啰，啥特权也没有。

凡是通过new function创建的对象都是函数对象，其他都是普通对象（通常通过object创建），可以通过typeof来判断。

function f1(){};
typeof f1 //"function"


var o1 = new f1();
typeof o1 //"object"

var o2 = {};
typeof o2 //"object"

这边要注意的是下面这两种写法是一样的

function f1(){};  ==  var f1 = new function();

function f2(a,b){
  alert(a+b);
}

等价于

var f2 = new function(a,b,"alert(a+b)");

prototype、_proto_和construetor（构造函数）

下面两句话也很重要

1、每一个函数对象都有一个prototype属性，但是普通对象是没有的；

　 prototype下面又有个construetor，指向这个函数。

2、每个对象都有一个名为_proto_的内部属性，指向它所对应的构造函数的原型对象，原型链基于_proto_;

好了,开始上代码和例子,建一个普通对象，我们可以看到

　　1、o的确没有prototype属性

　　2、o是object的实例

　　3、o的__proto__指向object的prototype

　　4、object.prototype.constructor指向object本身

　　还可以继续往下延伸......

var o = {};
  console.log(o.prototype); //undefined
  console.log(o instanceof object); //true
  console.log(o.__proto__ === object.prototype) //true
  console.log(object === object.prototype.constructor) //true 
  console.log(object.prototype.constructor) //function object()
　　console.log(object.prototype.__proto__); //null

基于js中的原型(全面讲解)

下面来一个函数对象，从下面的例子可以看出

1、demo是函数对象，f1还是普通对象

2、f1是demo的实例

3、demo的原型prototype的__proto__指向object的原型prototype,而object的原型prototyped的__proto__指向null;

function demo(){};
  var f1 = new demo();
  console.log(f1.prototype); //undefined
  console.log(f1 instanceof demo); //true
  console.log(f1.__proto__ === demo.prototype); //true
  console.log(demo === demo.prototype.constructor) ;//true
  console.log(demo.prototype.__proto__ === object.prototype) ;//true
  console.log(object.prototype.__proto__); //null

基于js中的原型(全面讲解)