JavaScript学习笔记（11）：面向对象的特征

JavaScript是真正的面向对象的语言，但是和Java、C++等面向对象的语言有根本的不同点：

有实力化/实例这个概念，没有所谓的“类”，只有“原型”的概念。

原型是指“某个对象的原始对象”（有点像父类、超类）。在JavaScript中，使用原型来创建新的对象。因为这个特征，JavaScript的面向对象也称为基于原型的面向对象。原型也可以理解为“约束较弱的类”。

使用构造函数初始化：

var Member=function(firstName, lastName){
  this.firstName=firstName;
  this.lastName=lastName;
  this.getName=function(){
    return this.lastName+' '+this.firstName;
    }
}

var mem=new Member('Jacky','Chen');
console.log(mem.getName());

var mem2=new Member('草稚','京');
console.log(mem2.getName());

这里this关键字表示由结构函数生成的实例（也就是自己本身）。通过对this关键字设定变量，可以设定实例的属性。

添加动态方法

通过new运算实例化对象以后，再添加方法。

var Member=function(firstName, lastName){
  this.firstName=firstName;
  this.lastName=lastName;
}

var mem=new Member('Jacky','Chen');
mem.getName=function(){
  return this.lastName+' '+this.firstName;
}

console.log(mem.getName());    //Chen Jacky

var mem2=new Member('草稚','京');
console.log(mem2.getName());    //这里会显示错误

上面的语句中，getName的方法属于mem.，而Member本身没有添加getName的方法。

如果不想之后对实例添加或者删除属性，可以使用seal的方法，对实例进行封装。

var Member=function(firstName, lastName){
  this.firstName=firstName;
  this.lastName=lastName;
}

var mem=new Member('Jacky','Chen');
mem.getName=function(){
  return this.lastName+' '+this.firstName;
  Object.seal(this);
}

console.log(mem.getName());    //Chen Jacky

this关键字

this关键字会根据上下文内容发生变化。

this是可以在脚本中的任何地方都可以访问的特殊变量，也算是一个会根据调用位置或者是调用的方法（上下文）内容会改变的奇怪变量。

thiss关键字的指向：

位置	this指向
顶层（函数之外）	全局对象
函数内	全局对象
call/apply方法	参数指定的对象
事件监听器	事件的发生源
构造函数	生成的实例
方法	调用位置的对象（接收函数）

call和apply的方法都是用来给函数传递参数并调用这个函数。call和apply的区别在于给药运行的函数func传递参数的方法。call方法是诸葛设定参数值，而apply方法传递的是包含多个参数的数组。

func.call(that[,arg1[,arg2[,...]]])

func.apply(that[,args])

*func：函数对象        that：函数中this对象表示的内容        arg1、arg2...：传递给函数的参数        

agrs：传递给函数的数组

var data='Global';
var obj1={data:'obj1 data'};
var obj2={data:'obj2 data'};

function hoge(){
  console.log(this.data);
}

hoge.call(null);    //Global
hoge.call(obj1);    //obj1 data
hoge.call(obj2);    //obj2 data

给that传递不同的参数，hoge函数中this的内容也不同，并且给参数that传递null时，会隐式传递全局对象（Global）

将类数组对象转换为数组：

使用call和apply的方法可以像arguments对象那样将「和数组很相似但不等于数组」的对象转为数组。

function hoge(){
  var args = Array.prototype.slice.call(arguments);//<=====(1)
  console.log(args.join('/'));
}

hoge('Angular','React','Backbone');    //结果：Angular/React/Backbone

注释1:将arguments对象作为this并调用Array.slice对象来处理。

prototype：JavaScript中为了给对象添加新成员，准备了prototype。prototype默认引用的是空对象，但可以为它添加新的属性和方法。

在prototype属性中存储的成员会被继承到实例化对象中。换句话说，在prototype中添加的成员，可以在根据这个类/构造函数生成的所有实例中使用。

再换句话说，实例化对象时，实例会隐式引用原始对象中的prototype对象。

slice：表示如果不指定参数，则直接返回原来的数组。

使用Array.from方法转换数组

function hoge(){
  let args = Array.from(arguments);
  console.log(args.join('/'));
}

hoge('Angular','React','Backbone');    //结果：Angular/React/Backbone

和之前的代码比较更加直观简单。