前 言
学过程序语言的都知道,我们的程序语言进化是从“面向机器”、到“面向过程”、再到“面向对象”一步步的发展而来。类似于汇编语言这样的面向机器的语言,随着时代的发展已经逐渐淘汰;而面向过程的语言也只有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的面向对象。