直接看代码,说明都在注释里了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单原型的使用</title>
<script type="text/javascript">
//在以前学习的知识里,我们要通过原型去添加属性和方法是这样的。
function Person(){}
Person.prototype.name = "张三";
Person.prototype.show = function(){
alert("name = "+this.name);
}
//这个时候,通过Person 构造方法创建的对象,就继承了从原型对象中拥有的属性和方法。
var person = new Person();
//name = 张三
person.show();
//function Person(){}
alert(Person.prototype.constructor);
//还有一种比较简单的形式,简单原型对象的方式,通过改变原型对象的方式来添加属性和方法。
Person.prototype = {
name : "李四",
show : function(){
alert("name = "+this.name);
}
};
var person1 = new Person();
//name = 李四
person1.show();
//上述这种模式就是简单原型模式,直接将一个匿名对象赋值给Person.prototype。
//这样的形式在给原型对象添加属性和方法的时候是比较简单的。但是也会存在问题
//问题1:我们知道原型对象Constructor属性指向构造函数本身。
//function Object() { [native code] }
alert(Person.prototype.constructor);
//但是使用简单原型对象,会改变原型对象的Constructor属性指向了Object。指向了父类的构造方法
//如果我们要使用简单原型对象,那么需要重新指定原型对象的Constructor属性为Person
//可以通过如下的方式
Person.prototype = {
constructor: Person,//使用这样的方式可以重新指定原型对象的Constructor属性为Person
name : "李四",
show : function(){
alert("name = "+this.name);
}
};
var person2 = new Person();
for(attr in person2){
alert(attr);//constructor name show
}
//function Person(){}
alert(Person.prototype.constructor);
//但是上述的方式还存在一个问题,我们知道默认的Constructor属性是不能被枚举的。
//但是使用上述的方式的Constructor属性可以被枚举。
//如果需要Constructor属性不可以被枚举。需要借助一个方法。
//该方法为Object.defineProperty(...)三个参数分别为
//参数1:重设属性的对象。参数2:设置什么属性。参数3:属性options参数配置
Object.defineProperty(Person.prototype, "constructor", {
enumerable:false,//不能被枚举
value:Person//值为Person
})
var person3 = new Person();
for(attr in person3){
alert(attr);//name show
}
</script>
</head>
<body>
</body>
</html>
PS:笔者有大量的学习资料:java、python、大数据、人工智能、前端等。需要的小伙伴请加群:711408961
笔者的b站中有一些教学视频分享。感兴趣的小伙伴可以关注:https://space.bilibili.com/412362068