码迷,mamicode.com
首页 > Web开发 > 详细

js中的继承

时间:2017-04-25 00:35:13      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:tor   函数对象   大写   ...   覆盖   class   变量   his   val   

三种方法:

一。 伪类

// 父类
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中的继承

标签:tor   函数对象   大写   ...   覆盖   class   变量   his   val   

原文地址:http://www.cnblogs.com/stephen666/p/6759703.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!