ES5的类
简单类的创建
es5里边创建一个类的方法是通过对function进行实例化(new)，如果一个方法不进行new实例化，也就意味着这只是个方法，而不会成为一个类。只有new过的方法，才能称之为类。
// 通常类名首字母用大写,用于区分普通函数,当然这只是口头约定,不用大写也可以,但是为了确保代码的可读性,通常情况下,类名首字母用大写
function Person() {
this.name = '小李';
this.run = function () {
console.log(this.name + '在运动')
}
}
Person.prototype.work = function () {
console.log(this.name + '在工作');
}
var p = new Person();
console.log(p.name); // 小李
p.run(); // 小李在运动
p.work(); // 小李在工作
Person.getInfo = function () {
console.log('这是个静态方法。');
}
/**
* 静态方法指的是在这个类上添加一个方法
*/
Person.getInfo() // 这是个静态方法。
原型链上的属性会被多个实例共享,而构造函数不会。
es5对象继承
es5的继承主要是使用: 对象冒充继承+原型链继承两种合并的混合继承方式。
- 第一种对象冒充继承
function Person(name, age) {
this.name = name;
this.age = age;
this.run = function () {
console.log(this.name + '在运动')
}
}
Person.prototype.work = function () {
console.log(this.name + '在工作')
}
function Web(name, age) {
Person.call(this, name, age); // 这一步叫做对象冒充继承
}
var w = new Web('王五', 20);
w.run() // 王五在运动
w.work() // 报错了 Uncaught TypeError: w.work is not a function
对象冒充继承的弊端就是不能获得原型链上的方法和属性,但是可以在实例化的时候传入参数通过 call()
- 第二种 原型链继承
function Person(name, age) {
this.name = name;
this.age = age;
this.run = function () {
console.log(this.name + '在运动')
}
}
Person.prototype.work = function () {
console.log(this.name + '在工作')
}
function Web(name, age) {
}
Web.prototype = new Person();
var w = new Web('王五', 20);
w.run() // undefined在运动
w.work() // undefined在工作
原型链继承虽然可以执行原型链的方法,但是无法传值,所以说可以结合两者的优点,完成完美的继承方案。
- 原型链继承+对象冒充继承
function Person(name, age) {
this.name = name;
this.age = age;
this.run = function () {
console.log(this.name + '在运动')
}
}
Person.prototype.work = function () {
console.log(this.name + '在工作')
}
function Web(name, age) {
Person.call(this, name, age);
}
Web.prototype = new Person();
// 下边这种方式也行,上下两行写一行就行,下边一行的意思是,直接把原型链上的所有属性和方法都赋值过去,上边的写法就是把实例放到Web的原型链上,都是赋值的原理。就是赋值的东西不太一样。
// Web.prototype = Person.prototype;
var w = new Web('王五', 20);
w.run() // 王五在运动
w.work() // 王五在工作
通常使用的就是混合继承方式
new 这个修饰符到底做了什么？
function Person() {
this.name = '小李';
this.run = function () {
console.log(this.name + '在运动')
}
}
var p = new Person();
function Web() {
this.namePro = 'web';
this.work = function () {
console.log(this.name + '在工作')
}
}
// 如果不new
Web.namePro // undefined
Web.work() // 报错 Uncaught TypeError: Web.work is not a function
使用关键字new创建新实例对象经过了以下几步：
1、创建一个新对象，如：var person = {};
2、新对象的proto属性指向构造函数的原型对象。
3、将构造函数的作用域赋值给新对象。（也所以this对象指向新对象）
4、执行构造函数内部的代码，将属性添加给person中的this对象。
5、返回新对象person。
function Person(name , age){
this.name = name;
this.age = age;
console.log(this); // Person {name: "neo", age: "23"}
//return this; 默认隐藏
}
var p1 = new Person('neo','10');
console.log(p1.name);
// 等同于：
function Person(name , age){
this.name = name;
this.age = age;
console.log(this); //window
return this;
}
var p1 = new Object(); //var p1 = {}
p1 = Person('neo','23');
console.log(p1.name);
