一、原型"__proto__"
//__proto__ var Mazey1 = { name: 'Mazey1', say: function(){ console.log('Hi, i\'m ' + this.name + '!'); } }; var Cherrie1 = { name: 'Cherrie1' }; Cherrie1.__proto__ = Mazey1; Cherrie1.say(); //Hi, i'm Cherrie1!
低版本IE不支持,不推荐使用。
二、方法"Object.create()"
//Object.create var Mazey2 = { name: 'Mazey2', say: function(){ console.log('Hi, i\'m ' + this.name + '!'); } }; function createMazey(name){ var m = Object.create(Mazey2); m.name = name; return m; } var Cherrie2 = createMazey('Cherrie2'); Cherrie2.say(); //Hi, i'm Cherrie2!
三、构造函数"function"
//function function Mazey3(name){ this.name = name; this.say = function(){ console.log('Hi, i\'m ' + this.name + '!'); } } var Cherrie3 = new Mazey3('Cherrie3'); Cherrie3.say(); //Hi, i'm Cherrie3!
四、构造函数"function" - 多个对象共用方法
//function 多个对象共用say function Mazey4(name){ this.name = name; } Mazey4.prototype.say = function(){ console.log('Hi, i\'m ' + this.name + '!'); } var Cherrie4 = new Mazey4('Cherrie4'); Cherrie4.say(); //Hi, i'm Cherrie4! var Luna4 = new Mazey4('Luna4'); Luna4.say(); //Hi, i'm Luna4!
节省内存,推荐使用。
五、类的继承/call/2017-07-28
//类1 function Mazey(name){ this.name = name; this.say = function(){ console.log('Hi, i\'m ' + this.name + '.'); }; } //用原型继承不了方法 Mazey.prototype = { run: function(){ console.log(this.name + 'is running.'); } }; var Cherrie = new Mazey('Cherrie'); Cherrie.say(); //Hi, i'm Cherrie. Cherrie.run(); //Cherrieis running. //类2 继承类1 call function Baby(name){ Mazey.call(this, name); this.eat = function(){ console.log(this.name + ' eats rice.'); }; } LittleBaby = new Baby('Baby'); LittleBaby.say(); //Hi, i'm Baby. LittleBaby.eat(); //Baby eats rice. LittleBaby.run(); //Uncaught TypeError: LittleBaby.run is not a function
原始类的原型"prototype"继承不了,把不需要继承的方法属性放在原型里面。
六、类的继承/ECMAScript6/2017-08-03
//类1 class Mazey { constructor(name, age){ this.name = name; this.age = age; } say(){ console.log(`My name is ${this.name}, i'm ${this.age}.`); } info(){ return `${this.name}, ${this.age}`; } } var m1 = new Mazey('mazey', 18); m1.say(); //My name is mazey, i'm 18. //类2 class Cherrie extends Mazey { constructor(name, age, sex){ super(name, age); //super一定要放在this前面,等于 Mazey.call(this, name, age) this.sex = sex; } say(){ super.say(); console.log(`I am a ${this.sex}(${this.age}).`) } moreInfo(){ console.log(`${super.info()}, ${this.sex}`); //super.info() => Mazey.info.call(this) } } var c1 = new Cherrie('cherrie', 17, 'girl'); c1.say(); //My name is cherrie, i'm 17. I am a girl(17). c1.moreInfo(); //cherrie, 17, girl
七、通过函数实例类/2017-08-10
可传入任意组{key: value}对象,只取需要的值,没有则使用默认值。
//定义类 function Person(obj) { this.name = obj.name || 'anonymous'; this.age = obj.age || 0; } //定义类共享内存的方法 Person.prototype.say = function () { console.log(`My name is ${this.name}, i'm ${this.age}.`); }; //通过函数创建实例 function newPerson (obj) { return new Person(obj || {}); } //正常传值 var mazey = newPerson({ //自动获取name和age name: 'mazeyqian', age: '19' }); mazey.say(); //My name is mazeyqian, i'm 19. //只传一个 var cherrie = newPerson({ name: 'cherrie' }); cherrie.say(); //My name is cherrie, i'm 0. //不传值 var someone = newPerson(); //若不传值,则使用默认值 someone.say(); //My name is anonymous, i'm 0. //传不相关值 var test = newPerson({ sex: 'boy' }); test.say(); //My name is anonymous, i'm 0.