1.最简单的类
function Person() {
this.name = "jake";
this.age = 20;
}
var p = new Person();
console.log(p.name);
2.构造函数和原型链里面新增方法
function Person () {
this.name = "jake";
this.age = 20;
this.run = function () {
return this.name + '在跑步'
}
}
Person.prototype.sex = 'man'
Person.prototype.work = function () {
return this.name + '在工作'
}
3. 类里面的静态方法
function Person() {
this.name = "jake";
this.age = 20;
this.run = function() {
return this.name + "在跑步";
};
}
Person.getInfo = function() {
console.log("这是静态方法");
};
// 原型链上的属性, 会被多个实例共享 , 但是构造函数不会
Person.prototype.sex = "man";
Person.prototype.work = function() {
return this.name + "在工作";
};
var p = new Person();
// p.getInfo(); 构造函数的静态方法 , 不会被实例共享
console.log(p.work());
4. es5里面的继承 , 对象冒充实现继承
function Person() {
this.name = "jake";
this.age = 20;
this.run = function() {
return this.name + "在跑步";
};
}
Person.prototype.sex = "man";
Person.prototype.work = function() {
return this.name + "在工作";
};
function Web() {
Person.call(this) /* 对象冒充实现继承 */
}
var w = new Web();
console.log(w.run()); /* 对象冒充可以继承构造函数里面的属性 和 方法 */
console.log(w.work) /* 但是不能继承原型链上的属性方法 */
5. es5里面的继承 原型链链继承
function Person() {
this.name = "jake";
this.age = 20;
this.run = function() {
return this.name + "在跑步";
};
}
Person.prototype.sex = "man";
Person.prototype.work = function() {
return this.name + "在工作";
};
function Web() {}
Web.prototype = new Person(); /* 原型链继承 */
var w = new Web();
console.log(w.run()); /* 对象冒充可以继承构造函数里面的属性 和 方法 */
console.log(w.work); /* 也可以继承原型链上的属性方法 */
6.但是原型链继承有一个问题
function Person(name, age) {
this.name = name;
this.age = age;
this.run = function() {
return this.name + "在跑步";
};
}
Person.prototype.sex = "man";
Person.prototype.work = function() {
return this.name + "在工作";
};
function Web(name, age) {}
Web.prototype = new Person();
var w = new Web("rose", 20); /* 实例话子类的时候无法给父类传参 */
console.log(w.run()); /* undefined在跑步 */
7.构造函数 + 对象冒充的组合继承模式
function Person(name, age) {
this.name = name;
this.age = age;
this.run = function() {
return this.name + "在跑步";
};
}
Person.prototype.sex = "man";
Person.prototype.work = function() {
return this.name + "在工作";
};
function Web(name, age) {
Person.call(this, name, age); //对象冒充继承 实例化子类可以给父类传值
}
Web.prototype = new Person();
var w = new Web("rose", 20);
console.log(w.run());
console.log(w.work());
8. 原型链 + 对象冒充继承 的 另一种写法
function Person(name, age) {
this.name = name;
this.age = age;
this.run = function() {
return this.name + "在跑步";
};
}
Person.prototype.sex = "man";
Person.prototype.work = function() {
return this.name + "在工作";
};
function Web(name, age) {
Person.call(this, name, age); //对象冒充继承 实例化子类可以给父类传值
}
Web.prototype = Person.prototype;
var w = new Web("rose", 20);
console.log(w.run());
console.log(w.work());
最后 , ts中定义类
class Person {
name: string;
constructor(n: string) { //实例话类的时候 , 触发的方法
this.name = n
}
// run():void{
// alert(this.name + '在跑步')
// }
getName(): string {
return this.name + '在跑步'
}
setName(name: string): void {
this.name = name
}
}
var p = new Person('jack')
alert(p.getName());
p.setName('rose')
alert(p.getName())
后面 会慢慢更新ts中实现继承等等...😊
