JS干货--拷贝与继承

浅拷贝与深拷贝

  -------------    浅拷贝  -------------  var obj = {    name: 'name'  }  var a = obj;  a.name = 'new name';  console.log(a.name); // 'new name'  console.log(obj.name); // 'new name'  这里就是一个浅拷贝的例子。a只是通过赋值符号得到了obj的引用。  ---------------    深拷贝  ---------------  function object(parent, child) {    var i,        tostring = Object.prototype.toString,        aStr = "[object Array]";    child = child || {};    for(i in parent) {      if(parent.hasOwnProperty(i)) {        //这时候还要判断它的值是不是对象        if(typeof parent[i] === 'object') {          child[i] = tostring.call(parent[i]) === aStr ? [] : {};          object(parent[i], child[i]);        }        else {          child[i] = parent[i];        }      }    }    return child;  }  var obj = {    tags: ['js','css'],    s1: {      name: 'dai',      age: 21    },    flag: true  }  var some = object(obj);  some.tags = [1,2];  console.log(some.tags); //[1, 2]  console.log(obj.tags); //['js', 'css']    这里可能有一些写法，对于新手不太友好，可以看看我前面的文章（^_^）。  上面只是对于单个对象的深拷贝，那么这里要引入多个对象拷贝的需求（mixin）:  function mixIn() {    var i,        slice = Array.prototype.slice,        args = slice.call(arguments),        result;    for(i = 0, max = args.length; i < max; i++) {      result = object(args[i], result);    }    return result;  }  var a = {    tags: [1,2,3]  }  var b = {    b1: {      name: 'no name',      age: 21    }  }  var c = mixIn(a, b);  是不是很棒，重用了很多代码。

JS中的继承模式。

首先大家要明白原型链,原型链简单解释。让你要记住prototype只能指向对象，不能指向函数。

  ----------------    method 1  ----------------  function inherit(Child, Parent) {    Child.prototype = new Parent();  }  function Parent(name) {    this.name = name || 'no name';  }  Parent.prototype.say = function () {    console.log(this.name + ' say hi !');  }  function Child() {}  inherit(Child, Parent);  var c = new Child();  c.say(); // 'no name say hi'  这种方法通过原型指向父类的实例，得到继承的效果，需要注意的：  1、对于父类构造器中的属性，我们没有办法赋予初始值。例如:    var c = new Child('dai')    c.say(); // 'no name say hi'  2、这里如何找到say方法的。    c.__proto__.__proto__ === Parent.prototype  ------------    method 2  ------------  function Father() {    this.fMoney = 50;    this.say = function () {      console.log('father');    }  }  function Mother() {    this.mMoney = 2000;  }  function Son() {    Father.call(this);    Mother.call(this);    this.hasMoney = function () {      return this.fMoney + this.mMoney;    }  }  var s = new Son();  s.hasMoney(); // 2050  s.say(); // "father"  这里采用了call方法，和它拥有差不多功能的还有apply和bind。这三个函数还是很重要的。  需要的注意的是:  1、我们将say方法定义Father构造器中，消耗内存。  ---------------------------    method 3(综合上面两种方法)  ---------------------------  function Parent(options) {    options = options || {};    this.name = options.name || 'no name';    this.age = options.age || 0;  }  Parent.prototype.say = function () {    console.log(this.name + ' say hi!');  }  function Child(options) {    options = options || {};    //调用父类的构造方法    Parent.call(this,options);    this.job = options.job || 'no job';  }  //继承原型链  Child.prototype = Object.create(Parent.prototype);  //重新指定构造器方法  Child.prototype.constructor = Child;  Child.prototype.work = function () {    console.log('work start');  }  var c = new Child({name: 'dai', age: 24, job: 'coder'});  c.say(); // 'dai say hi!'  c.work(); // 'work start'  console.log(c.age); // 24  console.log(c.job); // 'coder'  这种写法还是比较好理解的，而且我也比较喜欢这样的写法。  -------------    模仿类  -------------  var jlass = function(Parent, props) {    var Child,        F = function () {},        i;    Child = function () {      if(Child.uber && Child.uber.hasOwnProperty("__construct")) {        Child.uber.__construct.apply(this, arguments);      }      if(Child.prototype.hasOwnProperty('__construct')) {        Child.prototype.__construct.apply(this, arguments);      }    }    Parent = Parent || Object;    F.prototype = Parent.prototype;    Child.prototype = new F();    Child.uber = Parent.prototype;    Child.prototype.constructor = Child;    for(i in props) {      if(props.hasOwnProperty(i)) {        Child.prototype[i] = props[i];      }    }    return Child;  }  var People = jlass(Object, {    __construct: function (options) {      options = options || {};      this.name = options.name || 'no name';      this.age = options.age || 0;    },    say: function () {      console.log(this.name + ' ' + this.age);    }  })  var Man = jlass(People, {    __construct: function (options) {      options = options || {};      this.sex = options.sex || 'no';    },    intro: function () {      console.log(this.name + ' ' + this.age + ' ' + this.sex);    }  })  var man = new Man({name: 'dai', age: 24, sex: '男'});  man.say(); // 'dai 24'  man.intro(); // 'dai 24 男'  虽然JavaScript可以模仿这样的类，但是感觉变成了另一种语言了。(*_*)