【JavaScript 6連載】六、認識原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-認識原型</title>
<script>
function Person(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
// 下面這種方式不能達到方法的共享
// this.study = function(){
// console.log(this.name + '好好學習');
// }
}
Person.prototype.study = function(){
console.log(this.name + '好好學習');
};
var p1 = new Person('張三','b',18);
console.log(p1);
var p2 = new Person('李四','b',19);
console.log(p2);
// 在例項上動態新增屬性，會把原型物件上相同的屬性給遮蔽掉
p2.study = function(){
console.log('別打擾我，我要學習');
};
// 刪除p2中的age
// delete p2.age;
// 判斷某個屬性是否在一個例項中(屬性必須在當前的例項中，而不是在例項的建構函式的原型中)
if (p2.hasOwnProperty('age')) {
console.log(p2.age);
}
if (p2.hasOwnProperty('study')) {
p2.study();
}
</script>
</head>
<body>
</body>
</html>
例項二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>建立物件</title>
</head>
<body>
</body>
<script>
// 一個正常的構造器
function Person(name, age) {
this.home = "保護地球，人人有責！";
this.name = name;
this.age = age;
this.desc = function(){
console.log(this.name+" "+this.age+" "+this.home);
}
}
function Student(s){
this.school = s;
}
// 原型繼承，如果一個構造器需要需要建立一個有繼承的物件時，可以設定構造器的 prototype ，將其指定為一個 作為原型 的物件
Student.prototype = new Person("xxx", 1);
// var protoObj = new Person("xxx", 1);
// Student.prototype = protoObj;
// 子物件的構造器.prototype = new 原型物件的構造器(var1, var2....)
var st = new Student("青雲學院");
console.log(st.school);
st.desc();
var st1 = new Student("斯坦福大學");
console.log(st1.school);
st1.desc();
// protoObj.home = "保護地球，從小做起";
Student.prototype.home = "保護地球，從小做起";
st.desc();
st1.desc();
// st.home = "河南";
// st1.home = "荷蘭";
// st.desc();
// st1.desc();
</script>
</html>
例項三：
function Person(name, age) {
this.home = "保護地球，人人有責！";
this.name = name;
this.age = age;
this.desc = function(){
console.log(this.name+" "+this.age+" "+this.home);
}
}
// 注意：這裡的 sex和study是在追加新的屬性和方法之前就呼叫的，是不能生效的
// var p0 = new Person("小紅", 20);
// console.log(p0.sex);
// p0.study();
// Person作為一個正常的構造器也有自己的原型，在沒有明確指定 原型的時候 它的原型是一個抽象的 Object 物件，利用這樣的機制可以在不修改或者不明確原始碼時為該構造器追加新的功能
Person.prototype.sex = "男";
Person.prototype.study = function(){
console.log(this.name+"學習很努力！");
}
var p = new Person("小紅", 20);
p.study();
例項四：
function Parent(name,age,sex){
this.home = "保護地球，人人有責！";
this.name = name;
this.age = age;
this.sex = sex;
this.desc = function(){
console.log(this.name+" "+this.age+" "+this.home);
}
}
// 給parent的原型上增加一個方法;
Parent.prototype.say = function(){
console.log(this.name + "說：" + "好好學習吧！")
}
// 建立一個子類建構函式：
function Child(name,age,sex,work){
Parent.call(this,name,age,sex);
this.work = work;
}
// 原型：
Child.prototype = new Parent();
// var protoObj = new Parent();
// Child.prototype = protoObj;
// 給child的原型上增加一個方法;
Child.prototype.show = function(){
console.log(this.name + "的工作是" + this.work );
}
// var parent = new Parent();
// console.log(parent);
// console.log(parent.age);
var child = new Child("小紅",18,"girl","designer");
console.log(child);
child.say();
child.show();
// Child.prototype.home = "我愛我家";
// console.log(child.home);
var child1 = new Child("小花",23,"girl","teacher");
console.log(child1);
child1.say();
child1.show();
child1.show = function(){
console.log(this.age +"歲的"+ this.name + "的工作是" + this.work );
}
child1.show();
child1.home = "河南鄭州";
console.log(child1.home);
console.log(child1);
alert(child1.constructor == Parent)
Child.prototype.home = "四川";
console.log(child.home);
child.desc()