JavaScript中的类与原型

我们知道对象可以通过直接量创建，在这个过程中，系统实际上是调用了js中的全局静态函数Object.create()函数（在这个地方没有验证）创建，这时其原型为Object原型，不知道这里为什么obj可以使用Array原型的方法，如sort函数等。

通过这些可以看到，原型像是模板，对象就是模板的实例。但是在js中对象是可变的，就是说我们可以对对象添加属性元素或者是方法，这里就有了对象方法和原型方法的区别了，相信到这里，我们也知道了对象方法和原型方法的区别了。同时还有一个特别重要的概念-原型链，因为你继承的原型还有可能继承另外一个原型，依次下去自然成了一个原型链，可以看出一个链表，结构如下：

JavaScript中的类与原型我们可以通过下面的例子来理解上面的结构：

var base = {nick:"Lee"}

function obj() {
	this.name = "David";
}

obj.prototype = base;
obj.prototype.show = function() {console.log(this)}

var o = new obj();
console.log(o); //{ name: 'David'}
console.log(o.prototype); //undefined ？这是为什么，不是对它的原型进行了赋值吗？o只是obj的一个实例
console.log(typeof o); //object
console.log(o.nick); //Lee
base.show(); //{ nick: 'Lee', show: [Function] }
o.show(); //{ name: 'David' }
console.log(base); //{ nick: 'Lee', show: [Function] }
console.log(o); //{ name: 'David' }

当使用直接量来创建一个对象base时，其实其创建了一个原型链，其图如下：

JavaScript中的类与原型
当定义一个构造函数obj()时，通过构造函数创建对象o，对应的原型链如下图所示：

JavaScript中的类与原型
可以看到对象和原型之间的区别很小，可以说对象也可以看成是原型，只要有另外一个对象继承它。到这里我们就不难理解prototype的含义了，对象的prototype属性值指向的是他的原型，但是在对象中不能显示出prototype属性的值，不知道为什么。

>> 几个有名的__proto__，prototype 图

var foo = {
	x:10,
	y:20
};

JavaScript中的类与原型

var a = {
  x: 10,
  calculate: function (z) {
    return this.x + this.y + z;
  }
};
 
var b = {
  y: 20,
  __proto__: a
};
 
var c = {
  y: 30,
  __proto__: a
};
 
// call the inherited method
b.calculate(30); // 60
c.calculate(40); // 80

JavaScript中的类与原型

// a constructor function
function Foo(y) {
  // which may create objects
  // by specified pattern: they have after
  // creation own "y" property
  this.y = y;
}
 
// also "Foo.prototype" stores reference
// to the prototype of newly created objects,
// so we may use it to define shared/inherited
// properties or methods, so the same as in
// previous example we have:
 
// inherited property "x"
Foo.prototype.x = 10;
 
// and inherited method "calculate"
Foo.prototype.calculate = function (z) {
  return this.x + this.y + z;
};
 
// now create our "b" and "c"
// objects using "pattern" Foo
var b = new Foo(20);
var c = new Foo(30);
 
// call the inherited method
b.calculate(30); // 60
c.calculate(40); // 80
 
// let's show that we reference
// properties we expect
 
console.log(
 
  b.__proto__ === Foo.prototype, // true
  c.__proto__ === Foo.prototype, // true
 
  // also "Foo.prototype" automatically creates
  // a special property "constructor", which is a
  // reference to the constructor function itself;
  // instances "b" and "c" may found it via
  // delegation and use to check their constructor
 
  b.constructor === Foo, // true
  c.constructor === Foo, // true
  Foo.prototype.constructor === Foo, // true
 
  b.calculate === b.__proto__.calculate, // true
  b.__proto__.calculate === Foo.prototype.calculate // true
 
);

JavaScript中的类与原型

url: http://dmitrysoshnikov.com/ecmascript/javascript-the-core/

JavaScript中的类与原型

相关推荐