参考书籍
- /**
- * description: 构造函数模式创建对象
- */
- function Type(p) { this.param = p; // 定义属性
- this.method = function() { // 定义方法
- return this.param;
- }
- }
- var obj1 = new Type(1); // {param:1, method: function(){...}}
- var obj2 = new Type(2); // {param:2, method: function(){...}}
- console.log(obj1.method()) // 输出1
- console.log(obj2.method()) // 输出2
- var obj = new Object;
- obj.param = p;
- obj.method = function () { ... };
- var obj1 = new Type(1); // {param:1, method: function(){...}}
- var obj2 = new Type(2); // {param:2, method: function(){...}}
- this.method = function () { // 定义方法
- return this.param;
- }
- function Type(p) { this.param = p; // 定义属性
- this.method = function() { // 定义方法
- return this.param;
- }
- }
- function Type(p) { this.param = p; // 不同对象各自独有的属性
- }
- Type.prototype.method = function() { // 不同对象共享的属性
- return this.param;
- }
- function Type (p) {
- this.param = p; // 不同对象各自独有的属性
- }
- Type.prototype.method = function () { // 不同对象共享的属性
- return this.param;
- }
- // 卧槽,卧槽! 要是这么麻烦我干脆别用原型了
- var obj = new Type(1);
- // 超级麻烦!
- console.log(Object.getPrototypeOf(obj).method.call(obj)) // 输出1
- // 也很麻烦!同时这种简化破环了我们面向对象的初衷
- console.log(Type.prototype.method.call(obj)) //输出1
- function Type (p) {
- this.param = p; // 不同对象各自独有的属性
- }
- Type.prototype.method = function () { // 不同对象共享的属性
- return this.param;
- }
- var obj = new Type(1);
- console.log(obj);
- obj.method();
- function Type() { this.a = '实例对象中的a';
- }
- Type.prototype.a = 'prototype中的a';
- Type.prototype.b = 'prototype中的b';
- var obj = new Type();
- console.log(obj); //输出 : {a: "实例对象中的a"}
- console.log(obj.a); //输出:实例对象中的a
- console.log(obj.b); //输出: prototype中的b
- function Type() {}
- Type.prototype.str = '字符串'Type.prototype.num = 1;
- Type.prototype.arr = [1, 2, 3];
- var obj = new Type();
- console.log(obj); // {}
- obj.str = '覆盖后字符串';
- obj.num = 2;
- obj.arr = [3, 4, 5];
- console.log(obj.str); // 覆盖后字符串
- console.log(obj.num); // 2
- console.log(obj.arr); // [3.4.5]
- console.log(Type.prototype.str); // 字符串
- console.log(Type.prototype.num); // 1
- console.log(Type.prototype.arr); // [1, 2, 3]
- function Type () {}
- Type.prototype.str = '字符串'
- Type.prototype.num = 1;
- var obj = new Type();
- console.log(obj); // 空实例对象 {}
- obj.str +=',加点东西'; // 尝试直接修改属性
- obj.num += 1; // 尝试直接修改属性
- console.log(obj.str); // 字符串,加点东西
- console.log(obj.num); // 2
- console.log(Type.prototype.str); // 字符串
- console.log(Type.prototype.num); // 1
- console.log(obj); // {str: "字符串,加点东西", num: 2}
- function Type() {}
- Type.prototype.objProperty = {
- a: 1
- };
- Type.prototype.arrProperty = [1, 2];
- var obj = new Type();
- console.log(obj.objProperty) // {a: 1}
- console.log(obj.arrProperty) // [1, 2]
- obj.objProperty.a = 111; // 直接修改引用类型的属性值
- obj.arrProperty.push(3); // 直接修改引用类型的属性值
- // 原型对象中的属性值被修改了
- console.log(Type.prototype.objProperty) // {a: 111}
- console.log(Type.prototype.arrProperty) // [1, 2, 3]
- console.log(obj); // 输出 {} obj还是空的!!
- function Type () {}
- Type.prototype.arrProperty = [1,2];
- var obj1 = new Type();
- var obj2 = new Type();
- console.log(obj2.arrProperty) // [1, 2]
- obj1.arrProperty.push(3);
- console.log(obj2.arrProperty); // [1, 2, 3] 我怎么被修改了???
- function Person (name, age) {
- this.name = name;
- this.age = age;
- this.friends = ['Wang','Li'];
- }
- Person.prototype.sayName = function () {
- return this.name;
- }
- var person1 = new Person('Zhang',13);
- var person2 = new Person('Huang',15);
- person1.friends.push('Peng')
- console.log(person1.friends); // ["Wang", "Li", "Peng"]
- console.log(person2.friends); // ["Wang", "Li"]
- console.log(person1.sayName()) // Zhang
- console.log(person2.sayName()) // Huang
- console.log(person1.sayName == person2.sayName) // true
- /**
- * description: 借用构造函数实现继承
- */
- function superType () { // "父类"构造函数
- this.name = "aaa";
- this.sayName = function () {
- return this.name
- }
- }
- function subType () { // "子类"构造函数
- superType.call(this); // 调用"父类"的构造函数
- }
- var obj = new subType();
- console.log(obj.name); // 输出 aaa
- console.log(obj.sayName()); // 输出 aaa
- function superType (name) { // "父类"构造函数
- this.name = name;
- this.sayName = function () {
- return this.name
- }
- }
- function subType (name) { // "子类"构造函数
- superType.call(this,name); // 调用"父类"的构造函数,并传递参数
- }
- var obj = new subType("XXX")
- console.log(obj.name); // 输出XXX
- console.log(obj.sayName()); // 输出XXX
- /**
- * description: 利用原型和原型链实现继承
- */
- function superType() { // "父类"构造函数
- this.name = 'XXX'
- }
- superType.prototype.sayName = function() {
- return this.name;
- }
- function subType() {
- } // "子类"构造函数
- // 创建父类构造函数的实例,并赋给子类的原型
- subType.prototype = new superType();
- var obj = new subType();
- console.log(obj.sayName()); // 输出 XXX
- subType.prototype = new superType(); // {name: "XXX"}
- subType.prototype = new superType();// #1
- var obj = new subType(); // #2
- function superType () { // "父类"构造函数
- this.arr = [1,2]
- }
- function subType () { } // "子类"构造函数
- subType.prototype = new superType();
- var obj1 = new subType();
- var obj2 = new subType();
- console.log(obj2.arr); // 输出 [1, 2]
- obj1.arr.push(3);
- console.log(obj2.arr); // 输出 [1, 2, 3] 卧槽,我又被乱改了!
- /**
- * description: 组合继承的例子
- */
- function SuperType (name) {
- this.name = name;
- this.colors = ['red','blue','green'];
- }
- SuperType.prototype.sayName = function () {
- console.log(this.name)
- }
- function SubType(name, age) {
- SuperType.call(this,name); // 继承实例属性
- this.age = age;
- }
- SubType.prototype = new SuperType(); // 继承方法
- SubType.prototype.sayAge = function () { // 写入新的方法
- console.log(this.age)
- }
- var obj1 = new SubType('Wang', 20);
- obj1.colors.push('black');
- console.log(obj1.colors); // ["red", "blue", "green", "black"]
- obj1.sayName(); // Wang
- obj1.sayAge(); // 20
- var obj2 = new SubType('Zhang', 23);
- console.log(obj2.colors); // ["red", "blue", "green"]
- obj2.sayName(); // Zhang
- obj2.sayAge(); // 23
- class Vehicle {
- setColor (color) { this.color = color }
- setWheels (num) { this.wheels = num }
- setEngine (num) { this.engine = num }
- }
- class Car extends Vehicle { // 继承
- setWheels () { this.wheels = 4 } // 方法重写
- setEngine (1) { this.engine = 1 } // 方法重写
- }
如图
- // 工具类
- VehicleParts = {
- setWheels: function (num) { ... } // 安装车轮
- setEngine: function (num) { ... } // 安装引擎
- }
- // 衍生类
- Car.protoType = VehicleParts; // 委托
- Car.build = function () {
- setWheels(4); // 4轮子
- setEngine(1); // 1引擎
- }
- Bike.protoType = VehicleParts; // 委托
- Bike.build = function () {
- setWheels(2); // 2轮子
- setEngine(0); // 0引擎
- }
如图
来源: https://www.cnblogs.com/penghuwan/p/8124305.html