(1)知识点
- (1.1)prototype的定义
- (1.2)prototype的好处
- (1.2)prototype使用注意点
(2)细化
(2.1)prototype的定义
(1)定义出来对象是有prototype的
(2)new出来的对象,是没有prototype的
(3)prototype是一个对象,它有一个构造函数(constructor),这个构造函数就是它本身
(2.2)prototype的好处
(1)在前端的世界里,我们也希望可以通过面向对象的方式去编程,所以我们可以用prototype来创建对象的属性和方法
补充一句:
(A)就是我们的业务场景是和对象紧密关联的
(B)更好和后端系统协作
(C)因为json串更好的支撑面向对象,所以也经常用json这个格式来传输数据
(2)我们可以通过给原型添加属性和方法来给给对象添加属性或方法!
(2.3)prototype的使用注意点:
我们基于prototype去新增的属性和方法是不能覆盖原来对象内部的属性或者方法
(1.1)默认调用的是函数对象本身的属性或方法.
(1.2)通过原型增加的属性或方法的确是存在的.
(1.3)函数对象本身的属性或方法的优先级要高于原型的属性或方法.
(3)实践
<script type="text/javascript">
init();
function init() {
learnPrototype();
//learnProtoTypeCover();
}
//学习原型属性覆盖
function learnProtoTypeCover() {
var hzq = new Person();
alert(hzq.name);
hzq.sayHello();
//我们定义的对象,才有prototype
Person.prototype.name = 'zhujinlin';
Person.prototype.sayHello2 = function () {
alert('say zhujinlin');
}
alert(hzq.name);
hzq.sayHello2();
}
function Person() {
this.name = 'haozhongqing';
this.sayHello = function () {
alert('hello,haozhongqing');
}
}
function learnPrototype() {
var waixingrenSbd = new shubiaodian(40, 20, "铝", "外星人");
waixingrenSbd.create();
alert(waixingrenSbd.prototype);//undefined<-----new出来的对象,是没有原型的
alert(typeof shubiaodian.prototype);//object
alert(shubiaodian.prototype.constructor);//原型的构造函数就是本身
shubiaodian.prototype.destory = function () {
alert("shubiaodian xiaohui");
}
shubiaodian.prototype.copy = function () {
alert(this.pinpai + " 被复制了");
}
waixingrenSbd.destory();
waixingrenSbd.copy();
}
//这最后一个constructor对象就是我们构造出来的function函数本身
function shubiaodian(length, width, caizhi, pinpai) {
//属性
//TODO:this在js中的含义
this.length = length;
this.width = width;
this.caizhi = caizhi;
this.pinpai = pinpai;
this.age = 2;
//方法
this.create = function () {
alert("长度:" + this.length);
alert("宽度:" + this.width);
alert("材质:" + this.caizhi);
alert("品牌:" + this.pinpai);
alert("使用年限:" + this.age);
//和后台交互
}
}
</script>