JavaScript中的类与原型

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

 

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


 
我们可以通过下面的例子来理解上面的结构:

 

 

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时,其实其创建了一个原型链,其图如下:



 
当定义一个构造函数obj()时,通过构造函数创建对象o,对应的原型链如下图所示:



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

 

>> 几个有名的__proto__,prototype 图

 

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

 

 

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

 
 

// 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
 
);

 
 

 

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

<!--[endif]-->

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值