JS面向对象(一)——JS OOP基础与JS 中This指向详解

前  言

　　学过程序语言的都知道，我们的程序语言进化是从“面向机器”、到“面向过程”、再到“面向对象”一步步的发展而来。类似于汇编语言这样的面向机器的语言，随着时代的发展已经逐渐淘汰；而面向过程的语言也只有C语言老大哥依然坚挺；现在主流的语言(例如Java、C++、PHP等)都是面向对象的语言。 而我们的JavaScript语言，恰恰介于面向过程与面向对象之间，我们称它为“基于对象”的语言。但是，JS中的OOP依然是我们学习JS的重要一环，当然像“继承”“封装”这样的面向对象特征，都是由模拟实现的。今天，我们就一起来探讨一下JS中的面向对象吧！

 

一、面向对象概述

1.1面向过程与面向对象

　　面向过程：专注于如何去解决一个问题的过程。编程特点是用一个个函数去实现过程操作，没有类与对象的概念；

　　[举个栗子]

　　当你想吃一个鸡蛋灌饼的时候，面向过程的思维需要你掌握购买食材、和面、烙饼、煎蛋等一系列的方法，然后按照顺序一个一个方法的去执行。

 

　　面向对象：专注于有哪一个对象实体去解决这个问题。编程特点是：出现了一个个的类，由类去生成对象。

　　[举个栗子]

　　还是想吃鸡蛋灌饼，按照面向对象的思维，你需要去找一个买鸡蛋灌饼的阿姨，让他给你做一个。这时候，这个阿姨就是我们解决这个问题的对象。

 

1.2面向对象三大特征

　　继承、封装、多态

 

1.3类&对象的关系

　　① 类：一群有相同特征(属性)和行为(方法)的集合。

　　eg： 人类  属性：身高、体重、年龄   方法：吃饭、说话、敲代码

　　② 对象：从类中，拿出的具有确定属性值和方法的个体；

　　eg： 张三  属性：身高180体重180方法：说话--我叫张三

　　③ 类和对象的关系：

　　类是抽象的，对象是具体的。(类是对象的抽象化，对象是类的具体化)

 

　　通俗的来讲：类是一个抽象的概念，表示具有相同属性和行为的集合，但是类仅仅表明这类群体具有相同的属性，但是没有具体的属性值。而对象是对类的属性进行具体赋值后，而得到的一个具体的个体；

　　[举个栗子]

　　人类有身高、体重、年龄，但是不能说人类的身高是多少。而张三，是人类的一个具体个体，身高、体重都有具体值，那么张三就是人类的一个对象

 

二、JavaScript中的面向对象

2.1创建类和对象的步骤

　　① 创建一个类(构造函数)。 类名，必须要每个单词的首字母都大写

funtion 类名(属性一){
　　this.属性=属性一;
　　this.方法=function(){}//this指向谁？ -- 即将调用当前构造函数的对象。
}

　　② 通过类，实例化出一个新的对象；

var obj =new类名(属性一的Value);//原构造函数中this，指向新创建的obj对象；
obj.方法(); 调用方法
obj.属性; 调用属性

 

2.2内创建类和对象代码示例

//① 定义一个类(构造函数)

function Person(name,age,sex){

　　//类的属性

　　this.name =name;

　　this.age =age;

　　this.sex =sex;

　　//类的方法

　　this.say =function(){

　　　　alert("我叫"+this.name+";今年"+this.age+"岁；是一个"+this.sex+"生");

　　}

}

//从类中，实例化出一个对象。并给对象的属性赋值

var zhangsan =new Person("张三",18,"男");//

zhangsan.say();

var lisi =new Person("李二狗",16,"男");//

lisi.say();

 

三、JavaScript中的this指向问题

全局作用域或者普通函数中this指向全局对象window。

//直接打印
console.log(this) //window

//function声明函数
function bar () {console.log(this)}
bar() //window

//function声明函数赋给变量
var bar = function () {console.log(this)}
bar() //window

//自执行函数
(function () {console.log(this)})(); //window

方法调用中谁调用this指向谁

//对象方法调用
var person = {
    run: function () {console.log(this)}
}
person.run() // person

//事件绑定
var btn = document.querySelector("button")
btn.onclick = function () {
    console.log(this) // btn
}
//事件监听
var btn = document.querySelector("button")
btn.addEventListener('click', function () {
   console.log(this) //btn
})

//jquery的ajax
 $.ajax({
    self: this,
    type:"get",
    url: url,
    async:true,
    success: function (res) {
        console.log(this) // this指向传入$.ajxa()中的对象
        console.log(self) // window
    }
   });
 //这里说明以下，将代码简写为$.ajax（obj） ，this指向obj,在obj中this指向window，因为在在success方法中，独享obj调用自己，所以this指向obj

3.在构造函数或者构造函数原型对象中this指向构造函数的实例

//不使用new指向window
function Person (name) {
    console.log(this) // window
    this.name = name;
}
Person('inwe')
//使用new
function Person (name) {
      this.name = name
      console.log(this) //people
      self = this
  }
  var people = new Person('iwen')
  console.log(self === people) //true
//这里new改变了this指向，将this由window指向Person的实例对象people

 

好了，通过本篇博客，我们了解了什么是面向对象、类和对象的关系、JS中声明类与对象的步骤，以及重点讲解的this指向问题！ 希望能够帮助大家真正的理解了this的认知，接下来的博客让我们继续探讨JavaScript的面向对象。