在es5之前js中是没有显式的继承,那也就没有所谓显式的多态,那是不是就无法扩展对象的方法,很显然不是。
我们先从File这个类对象看起,这是一个上传文件的测试代码。
<input type="file" name="TEST_FILE" id="test_file">
<script>
var _file=document.getElementById('test_file');
var file;
_file.addEventListener('change',function(){
file=_file.files[0];
console.log(file);
},false)
</script>
打印的结果如下:
- File={
- lastModified:1468122486200
- lastModifiedDate:Sun Jul 10 2016 11:48:06 GMT+0800 (中国标准时间)
- name:"OpenCV入门教程.pdf"
- size:1976138
- type:"application/pdf"
- webkitRelativePath:""
- __proto__:File
- },
- 对象初始化之后会带有File()这个构造函数内部this的属性和方法,
- 看最后一个属性__proto__,比较形象的指向了这个对象的构造函数的原型,
- 可以打印file.__proto__===File.prototype // true,继续看这个原型链指向的原型。
- File.prototype=
- {
- constructor:File()
- lastModified:(...)
- get lastModified:()
- lastModifiedDate:(...)
- get lastModifiedDate:()
- name:(...)
- get name:()
- size:(...)
- type:(...)
- webkitRelativePath:(...)
- get webkitRelativePath:()
- Symbol(Symbol.toStringTag):"File"
- __proto__:Blob
- }
- 这是其实可以看到File.prototype非常像一个类,
- 有构造函数,有成员函数,有成员变量,这里又看到一个__proto__:Blob
- Blob.prototype={
- constructor:Blob()
- size:(...)
- get size:()
- slice:slice()
- type:(...)
- get type:()
- Symbol(Symbol.toStringTag):"Blob"
- __proto__:Object
- }
- 继续测试 file._proto_.__proto__===File.prototype.__proto__===Blob.prototype// true
- 会发现 File.prototype和Blob.prototype这两个类通过__proto__完成了继承,
- 这个关键词就像extends 一样了。
- 接下来我们通过一段代码来验证这个继承:
function Person()
{
}
Person.prototype=
{
say:function()
{
console.log("我是一个人");
}
}
function Children()
{
}
Children.prototype=
{
play:function()
{
console.log("我会玩");
}
}
Children.prototype.__proto__=Person.prototype;
var xiaoming=new Children();
xiaoming.say();
xiaoming.play();
构造函数内部的对象的属性和方法可以通过apply继承, - 下次可以看看用apply继承和调用其他对象的方法。