js的原型和闭包3

in js with 0 comment views: 570 times

原文《深入理解javascript原型和闭包(3)——prototype原型》地址:http://www.cnblogs.com/wangfupeng1988/p/3978131.html

函数也是一种对象,也是属性的集合,你可以对函数进行自定义属性。

js默认就给了函数一个属性-- prototype ,每个函数都有一个属性叫 prototype
QQ20180419-102617.png
这个 prototype 的属性值就是一个对象。默认只有一个叫 constructor 的属性,指向这个函数本身。
QQ20180419.png

如上图,SuperType 是一个函数,右侧的方框就是它的原型。

原型既然作为对象,属性的集合。不可能就只弄个 constructor 来玩玩,肯定可以自定义的增加许多属性。比如 Objectprototype 里面就有好几个其他属性。

QQ20180419-141408.png
你也可以在自己自定义的方法的 prototype 中新增自己的属性。

Fn.prototype.name = 'weber'
Fn.prototype.year = function () {
    return 2018
}

QQ20180419-141642.png
这样做有什么用呢??

看下jquery

var $div = $('div');
$div.attr('name','weber')

以上代码中,$('div') 返回的是一个对象。假设创建这一对象的函数是 myJQuery,它其实是这样实现的

myjQuery.prototype.attr = function () {
    //……
};
$('div') = new myjQuery();

用我们自己的代码实现就是:

var Fn = function(){}

Fn.prototype.name = 'weber'
Fn.prototype.year = function () {
    return 2018
}

var fn = new Fn();
console.log('name-->>',fn.name);

QQ20180419-145203.png
即,Fn 是一个函数,fn对象是从Fn 函数new出来的,这样fn对象就可以调用 Fn.prototype。 即: fn.__proto__ === Fn.prototype
QQ20180419-150118.png
这里的 “__proto__” 成为隐式原型

Responses