首页 > 代码库 > js中的继承

js中的继承

2024-09-17 03:58:22   216人阅读

三种方法：

一。 伪类

// 父类
var Par = function (props) {
  ...
}
Par.prototype = {
  constructor: Par, // 养成好习惯
  method: function () {
  
  },
  ...
};
// 子类开始继承
// 第一步，使用call方法调用希望“继承”的构造函数，并绑定this；
var Child = function (props) {
  Par.call(this, props);
  ...
}
// 第二步，原型链继承，注意不要使用丑陋的new
Child.prototype = Object.create(Par.prototype);
// 第三步，继续在新的构造函数的原型上定义新方法或者覆盖父类的方法
Child.prototype.constructor = Child;
Child.prototype.method = function (...) {
  ...
};
...
上面这样的方法很常见，但并不好看至少我觉得，js并不是类的语言，但是这里强行用类的方法继承，看着不爽。

   虽然js中并没有类的概念，不过这里是用类的思想实现继承，所以我称为父类和子类，但实际上都是伪类。

二。 原型

// 父对象
var par = {
  key1: value1,
  key2: value2,
  key3: function () {
    ...
  },
  ...
};
// 子对象开始继承
// 第一步，构造示例
var child = Object.create(par);
// 第二步，实现自己需要的属性
child.key1 = value11;
child.key3 = function () {
  ...
};
child.key4 = function () {
  ...
};
...

从上面的代码可以看出，子对象无需过多去关注父对象的内容，而把精力放在与父对象的区别上，这就是所谓的差异化继承。

相比第一种方法，有两点需要注意：

（1）这里的对象都不用首字母大写，因为不是类的思想；

（2）这里的父对象只是一个普通对象，而第一种方法中的父对象是函数对象。

如果能用这种方法实现继承，真的别用伪类方法实现。

三。 函数化

// 父函数
var par = function (props) {
  // 首先给父类增加that
  var that = {};
  // 实现自己的方法
  that.getName = function () {
    return props.name;
  };
  that.getAge = function () {
    return props.age;
  };
  ...
  // 记得要返回that
  return that;
};
// 子函数
var child = function (props) {
  // 通过函数调用实现继承关系
  var that = par(props);
  // 实现自己想要的属性
  that.newMethod = function() {
    ...
  };
  ...
  // 记得要返回that
  return that;
};
//调用
var myChi = child({name:"jk"});

js本来就是函数化语言，从上面的方法看出，这种方法非常清晰，更重要的是无论是理解上还是写起来都是非常的方便！！大力推荐！！

如果你以为只有这点好处你就错了，函数化最大的好处是可以保护隐私。

在函数内部使用var来声明变量时，只有函数内部才能使用，这就实现了私有属性和方法，只有通过加上that.的前缀，才会变成公有方法，

甚至，更安全的，可以先把函数定义为私有方法，然后再把他们分配给that：

var methodical = function () {
  ...
};
that.methodical = methodical;

这样做的好处是如果其他方法想要调用methodical，他们可以直接调用methodical()而不是that.methodical()，

如果该实例被破坏或篡改，调用methodical的方法同样会继续工作，因为他们私有的methodical不受该实例被修改的影响。

js中的继承


联系
我们