温故知新之javascript面向对象

头像
已注销
    阅读 6 分钟
    2

    基本概念

    类和实例是大多数面向对象编程语言的基本概念

    • 类：类是对象的类型模板

    • 实例：实例是根据类创建的对象
      但是，JavaScript语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。了与普通函数区别，构造函数名字的第一个字母通常大写。

    构造函数的特点有两个。

    • 函数体内部使用了this关键字，代表了所要生成的对象实例。

    • 生成对象的时候，必需用new命令

    new与构造函数

    1. new命令本身就可以执行构造函数，所以后面的构造函数可以带括号，也可以不带括号。

      下面两行代码是等价的。

      var v = new Vehicle();
var v = new Vehicle;

      应该非常小心，避免出现不使用new命令、直接调用构造函数的情况。为了保证构造函数必须与new命令一起使用，一个解决办法是，在构造函数内部使用严格模式，即第一行加上use strict。

      原理：由于在严格模式中，函数内部的this不能指向全局对象，默认等于undefined，导致不加new调用会报错（JavaScript不允许对undefined添加属性）。

    2. new命令的原理

      • 创建一个空对象，作为将要返回的对象实例

      • 将这个空对象的原型，指向构造函数的prototype属性

      • 将这个空对象赋值给函数内部的this关键字

      • 开始执行构造函数内部的代码

      即：

      var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

    3. 构造函数的return
      如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象。

    4. 如果对普通函数（内部没有this关键字的函数）使用new命令，则会返回一个空对象
      这里遇到了一个问题，问题描述如下普通函数用new测试的时候箭头函数报错了

    创建对象

    JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。
    当我们用obj.xxx访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。
    例如，创建一个Array对象：
    var arr = [1, 2, 3];
    其原型链是：
    arr ----> Array.prototype ----> Object.prototype ----> null
    Array.prototype定义了indexOf()、shift()等方法，因此你可以在所有的Array对象上直接调用这些方法。
    很容易想到，如果原型链很长，那么访问一个对象的属性就会因为花更多的时间查找而变得更慢，因此要注意不要把原型链搞得太长。

    new Student()

    function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}
var xiaoming= new Student('xiaoming'),
    xiaohong= new Student('xiaohong');

    xiaoming ↘
    xiaohong -→ Student.prototype ----> Object.prototype ----> null
    xiaojun ↗
    用new Student()创建的对象还从原型上获得了一个constructor属性，它指向函数Student本身：

    xiaoming.constructor === Student.prototype.constructor; // true
Student.prototype.constructor === Student; // true

Object.getPrototypeOf(xiaoming) === Student.prototype; // true

xiaoming instanceof Student; // true

    constructor

    constructor属性的作用，是分辨原型对象到底属于哪个构造函数。
    function F() {};
var f = new F();

f.constructor === F // true
f.constructor === RegExp // false
    上面代码表示，使用constructor属性，确定实例对象f的构造函数是F，而不是RegExp。

    构造函数继承 VS 原型链继承

    xiaoming.name
//"xiaoming"
xiaohong.name
//"xiaohong"
xiaoming.hello
/*function() {
        alert('Hello, ' + this.name + '!');
    }
*/
xiaohong.hello
/*function() {
        alert('Hello, ' + this.name + '!');
    }
*/
xiaoming.hello === xiaohong.hello
//false

    xiaoming和xiaohong各自的name不同，这是对的，否则我们无法区分谁是谁了。

    xiaoming和xiaohong各自的hello是一个函数，但它们是两个不同的函数，虽然函数名称和代码都是相同的！

    如果我们通过new Student()创建了很多对象，这些对象的hello函数实际上只需要共享同一个函数就可以了，这样可以节省很多内存。

    要让创建的对象共享一个hello函数，根据对象的属性查找原则，我们只要把hello函数移动到xiaoming、xiaohong这些对象共同的原型上就可以了，也就是Student.prototype：

    修改代码如下：

    function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};
xiaoming.hello === xiaohong.hello
//true

    继承方式对比

    1. 借用构造函数继承
      基本思想很简单，在子类型的构造函数内部调用父类型的构造函数：

      function SuperType(){
 this.colors = ["red", "blue", "green"];
}
function SubType(){
     //继承了 SuperType
     SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

      问题：方法都在构造函数内部定义，函数的复用性就无从谈起了。在超类型的原型中定义的方法，对子类型而言是不可见的。考虑这些问题，借用构造函数也是很少单独使用。

    2. 组合继承
      实现的思路是使用原型链实现对原型属性和方法的继承，而通过constructor stealing技术实现对实例属性的继承。

      function SuperType(name){
     this.name = name;
     this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
     alert(this.name);
};
function SubType(name, age){
     //继承属性
     SuperType.call(this, name);
     this.age = age;
}

//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
     alert(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

      组合继承避免了原型链和借用构造函数的缺陷，融合两者之长，是最常用的JS继承模式。

    3. 原型式继承
      如果只是想让一个对象与另一个对象保持类似的情况下，没有必要兴师动众地创建构造函数。我们可以使用原型式继承。
      Rect.prototype = Object.create(Shape.prototype);

    4. 原型继承
      JavaScript的原型继承实现方式就是：

    • 定义新的构造函数，并在内部用call()调用希望“继承”的构造函数，并绑定this；

    • 借助中间函数F实现原型链继承，最好通过封装的inherits函数完成；

    • 继续在新的构造函数的原型上定义新方法。

      var print = require('./print.js');

function Student(props) {
    this.name = props.name || 'Unnamed';
}

Student.prototype.hello = function () {
    print('Hello, ' + this.name + '!');
};

function Sub(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}

Sub.prototype.getGrade = function() {
    return this.grade;
};

function inherits(Child, Parent) {
    var F = function() {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

inherits(Sub, Student);

var xiaoming = new Sub({
    name: 'xiaoming',
    grade: 100
});

print(xiaoming.name + ' ' + xiaoming.grade);

print(xiaoming instanceof Student);
print(xiaoming instanceof Sub);

    class继承

    class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}
class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // 记得用super调用父类的构造方法!
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

    ES6引入的class和原有的JavaScript原型继承有什么区别呢？实际上它们没有任何区别，class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之，用class的好处就是极大地简化了原型链代码。
    这里遇到的问题是isPrototypeOf的问题

    多重继承

    JavaScript不提供多重继承功能，即不允许一个对象同时继承多个对象。但是，可以通过变通方法，实现这个功能。

    function M1() {
  this.hello = 'hello';
}

function M2() {
  this.world = 'world';
}

function S() {
  M1.call(this);
  M2.call(this);
}
S.prototype = M1.prototype;

var s = new S();
s.hello // 'hello'
s.world // 'world'
s instanceof M2
//false

    上面代码中，子类S同时继承了父类M1和M2。当然，从继承链来看，S只有一个父类M1，但是由于在S的实例上，同时执行M1和M2的构造函数，所以它同时继承了这两个类的方法。

    扩展

    1. apply的应用：转换类似数组的对象

      Array.prototype.slice.apply({0:1,length:1})
// [1]

Array.prototype.slice.apply({0:1})
// []

Array.prototype.slice.apply({0:1,length:2})
// [1, undefined]

Array.prototype.slice.apply({length:1})
// [undefined]

    2. bind结合call，可以改写一些JavaScript原生方法的使用形式

      [1, 2, 3].slice(0, 1)
// [1]

// 等同于

Array.prototype.slice.call([1, 2, 3], 0, 1)
// [1]

      call方法实质上是调用Function.prototype.call方法，因此上面的表达式可以用bind方法改写。

      var push = Function.prototype.call.bind(Array.prototype.push);
var pop = Function.prototype.call.bind(Array.prototype.pop);

var a = [1 ,2 ,3];
push(a, 4)
a // [1, 2, 3, 4]

pop(a)
a // [1, 2, 3]

    3. 某个属性到底是原型链上哪个对象自身的属性。

      function getDefiningObject(obj, propKey) {
  while (obj && !{}.hasOwnProperty.call(obj, propKey)) {
    obj = Object.getPrototypeOf(obj);
  }
  return obj;
}

    4. 获取实例对象obj的原型对象，有三种方法。

      obj.__proto__
obj.constructor.prototype
Object.getPrototypeOf(obj)

      推荐最后一种

      面向对象感觉还没怎么搞明白，模块的东西还没弄明白，有时间补上

    参考资料

    廖雪峰老师的教程
    阮一峰老师的教程
    BruceYuj的博客

    ecmascript-6原型oopjavascript
    已注销
    958 声望58 粉丝
    « 上一篇
    温故知新之javascript正则
    下一篇 »
    BFC与自适应浅析

    引用和评论

    推荐阅读
    头像
    sql查询入门练习题

    已注销赞 1阅读 5.2k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新