JavaScript进阶【三】JavaScript面向对象的基础知识复习
版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79547464 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript面向对象知识复习</title> </head> <body> <h2></h2> <script type="text/javascript"> /************************************************类，成员属性，成员方法******************************************************/ /** * 定义一个类 * @param name * @param age * @constructor */ function MyClass(name, age) { this.name = name; this.age = age; // 成员方法 this.toString = function () { alert(cls1.name+":"+cls1.age); }; }; /** * 实例化一个cls1对象 * @type {MyClass} */ var cls1 = new MyClass("xiugang", 15); //alert(cls1.name+":"+cls1.age); cls1.toString(); // 再给这个类的一个对象cls2添加一个方法 var cls2 = new MyClass("zhangsan", 25); cls2.ShowName = function () { alert(this.name+":"+this.age); }; cls2.ShowName(); // 使用Prototype对象来给函数添加方法 function Animal(name, age) { this.name = name; this.age = age; } Animal.prototype.toString = function () { alert(this.name+":"+this.age); }; // 实例化两个对象 var dog = new Animal("dog", 15); dog.toString(); var cat = new Animal("cat", 16); cat.toString(); // 利用prototype属性给一个类添加多个方法 function Person(name, age) { this.name = name; this.age = age; }; Person.prototype = { toString : function () { alert(this.name+":"+this.age); }, sayHello : function () { alert("say Hello!"); } }; var student = new Person("小明", 25); student.sayHello(); student.toString(); /************************************************静态类******************************************************/ var StaticClass = function () { } StaticClass.name = "StaticClass"; StaticClass.Sum = function (value1, value2) { return value1 + value2; }; alert(StaticClass.name+", "+StaticClass.Sum(10, 20)); /************************************************继承******************************************************/ function PeopleClass() { this.type = "People"; }; PeopleClass.prototype = { getType : function () { alert("This is a Person"); } }; function StudentClass(name, sex) { // 使用apply方法将父类对象的构造函数绑定到子类对象上 PeopleClass.apply(this, arguments); this.name = name; this.sex = sex; } var stu = new StudentClass("小红", "女"); alert(stu.type); // 实现了属性的继承 /** * 实现方法的继承 */ function Sophermore(name, sex) { PeopleClass.apply(this, arguments); // 实现父类方法的继承 /** * 实现思路： 需要循环将父类对象的prototype进行赋值， 即可达到继承的目的 */ var prop; for (prop in PeopleClass.prototype){ var proto = this.constructor.prototype; if (!proto[prop]){ proto[prop] = PeopleClass.prototype[prop]; } proto[prop]["super"] = PeopleClass.prototype; } this.name = name; this.sex = sex; } var stu2 = new Sophermore("xiuxiu", 22); alert(stu2.type); stu2.getType() /** * 方法二：实现继承的第二种方法， 使用对象冒充的方法 */ function AnimalNew(name, age) { this.name = name; this.age = age; this.Sum = function () { alert(this.name+","+this.age); } } // 成员方法 /*AnimalNew.prototype = { sayhello : function () { alert(this.name+"is saying Hello!"); }, sayAge : function () { alert(this.name+"'s age is "+this.age); } }*/ AnimalNew.prototype.sayHello = function () { alert(this.name+" is saying Haha!"); } // 子类开始实现继承 function Duck(name, age) { this.animal = AnimalNew; this.animal(name, age); } var duck = new Duck("鸭子", 12); //duck.sayHello(); //error! //duck.sayAge(); //error! //duck.sayHello(); //error! duck.Sum(); //ok的！ /************************************************JavaScript继承知识加强******************************************************/ function Animal(name) { // 属性 this.name = name; //实例方法 this.sleep = function () { console.log(this.name+"正在睡觉！"); } } // 原型方法 Animal.prototype.eat = function (food) { console.log(this.name+"正在吃"+food); } /** * 方法一： 将父类的实例作为子类的原型, 可以同时实现父类的属性和方法的继承 */ function Cat() { } Cat.prototype = new Animal(); Cat.prototype.name = "cat"; // test var cat =new Cat(); console.log(cat.name); cat.sleep() cat.eat("fish"); console.log(cat instanceof Animal); console.log(cat instanceof Cat); /** * 方法二： 组合继承 * 通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用 */ function Cow(name) { Animal.call(this); this.name = name; } Cow.prototype = new Animal(); Cow.prototype.constructor = Cat; var cow = new Cow("小牛博客"); console.log(cow.name); console.log(cow.sleep()); console.log(cat instanceof Animal); console.log(cat instanceof Cat); // 利用方法二：组合继承实现继承的综合案例 function Family(name, age) { // 属性 this.name = name; this.age = age; // 实例方法 this.Member = function () { alert("This family is having 5 memnbers now!"); } }; // 原型方法 Family.prototype = { sayHello : function () { alert(this.name +" is saying hello!"); }, sayAge : function () { alert(this.name +" is saying age:"+this.age); } }; // 开始实现继承 function Son(name, age) { Family.call(this); this.name = name; this.age = age; } Son.prototype = new Family(); Son.prototype.constructor = Family; // 开始测试 var son = new Son("王老大", 15); alert(son.age+", "+son.age); son.sayAge(); son.sayHello(); alert(son instanceof Family); alert(son instanceof Son); </script> </body> </html>
