老生常谈JavaScript面向对象基础与this指向问题


Posted in Javascript onOctober 16, 2017

前 言

我们的程序语言经历了从“面向机器”、到“面向过程”、再到“面向对象”的一个过程。而JavaScript是一门基于对象的一门语言,它介于面向过程与面向对象之间。在学习JavaScript的过程中,OOP是非常重要的一环,下面我们来一起探讨一下JS中的面向对象吧!!!

1 、OOP的基础问题

1.1什么是面向过程和面向对象?

面向过程:专注于如何去解决一个问题的过程步骤。编程特点是由一个个的函数去实现每一步的过程步骤,没有类和对象的概念。

面向对象:专注于由哪一个对象来解决这个问题。编程特点是出现了一个个的类,从类中拿到这个对象,由这个对象去解决具体的问题。

对于调用者来说,面向过程需要调用者自己去实现各种函数。而面向对象,只需要告诉调用者对象中具体方法的功能,而不需要调用者了解方法中的实现细节。

1.2面向对象的三大特征

继承、封装、多态

1.3类和对象的关系

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

比如:人类-->属性:身高、体重、性别 方法:吃饭、说话、走路

② 对象:从类中,拿出具有确定属性值和方法的个体。

比如:张三-->属性:身高180、体重180 方法:说话-->我叫张三,身高180

③ 类和对象的关系

类是抽象的,对象是具体的(类是对象的抽象化,对象是类的具体化)

解释一下:

类是一个抽象的概念,只能说类有属性和方法,但是不能给属性赋具体的值。比如说人类有姓名,但是不能说人类的姓名叫啥。。。

对象是一个具体的个例,是将类中的属性进行具体赋值而来的个体。比如说张三是人类的一个个体,可以说张三的姓名叫张三。也就是张三对人类的每一个属性进行了具体的赋值,那么张三就是由人类产生的一个对象。

2、 JavaScript中的面向对象

2.1创建类和对象的步骤

①创建一个类(构造函数):类名必须使用大驼峰法则,即每个单词的首字母必须大写。

function 类名(属性1){
  this.属性1 = 属性1;
  this.方法 = function(){
   //方法中要调用自身属性,必须要使用this.属性
  }
}

②通过类,实例化(new)出一个对象。

var obj = new 类名(属性1的具体值);

obj.属性; 调用属性

obj.方法(); 调用方法

③注意事项

>>>通过类名,new出一个对象的过程,叫做“类的实例化”

>>>类中的this,会在实例化的时候,指向新new出的对象。所以,this.属性 this.方法,实际上是将属性和方法绑定在即将new出的对象上面。

>>>在类中,要调用自身属性,必须使用this.属性名、如果直接使用变量名,则无法访问对应的属性。

>>>类名必须使用大驼峰法则,注意与普通函数的区别。

2.2两个重要属性constructor和instanceof

①constructor:返回当前对象的构造函数

>>>zhangsan.constructor = Person; √

②instanceof:检测一个对象,是不是一个类的实例;

>>>lisi instanceof Person √ lisi是通过Person类new出的

>>>lisi instanceof Object √ 所有对象都是Object的实例

>>>Person instanceof Object √ 函数本身也是对象

3、 JavaScript中的this指向问题

在上一部分中,我们创建了一个类,并通过这个类new出了一个对象。 但是,这里面出现了大量的this。 很多同学就要懵逼了,this不是“这个”的意思吗?为什么我在函数里面写的this定义的属性,最后到了函数new出的对象呢??

3.1谁最终调用函数,this就指向谁!

① this指向谁,不应该考虑函数在哪声明,而应该考虑函数在哪调用!!

② this指向的,永远只可能是对象,不可能是函数!!

③ this指向的对象,叫做函数的上下文context,也叫函数的调用者。

3.2this指向的规律(与函数的调用方式息息相关!)

① 通过函数名()调用的,this永远指向window

func(); // this--->window
//【解释】 我们直接用一个函数名()调用,函数里面的this,永远指向window。

② 通过对象.方法调用的,this指向这个对象

// 狭义对象
 var obj = {
  name:"obj",
  func1 :func
 };
 obj.func1(); // this--->obj
//【解释】我们将func函数名,当做了obj这个对象的一个方法,然后使用对象名.方法名, 这时候函数里面的this指向这个obj对象。

 // 广义对象
 document.getElementById("div").onclick = function(){
  this.style.backgroundColor = "red";
}; // this--->div
//【解释】对象打点调用还有一个情况,我们使用getElementById取到一个div控件,也是一种广义的对象,用它打点调用函数,则函数中的this指向这个div对象。

③ 函数作为数组的一个元素,用数组下标调用,this指向这个数组

var arr = [func,1,2,3];
arr[0](); // this--->arr
//【解释】这个,我们把函数名,当做数组中的一个元素。使用数组下标调用,则函数中的this将指向这个数组arr。

④ 函数作为window内置函数的回调函数使用,this指向window。比如setTimeout、setInterval等

setTimeout(func,1000);// this--->window
//setInterval(func,1000);
//【解释】使用setTimeout、setInterval等window内置函数调用函数,则函数中的this指向window。

⑤ 函数作为构造函数,使用new关键字调用,this指向新new出的对象

var obj = new func(); //this--->new出的新obj
//【解释】这个就是第二部分我们使用构造函数new对象的语句,将函数用new关键字调用,则函数中的this指向新new出的对象。

3.3关于this问题的面试题

var fullname = 'John Doe';
var obj = {
fullname: 'Colin Ihrig',

prop: {


fullname: 'Aurelio De Rosa',


getFullname: function() {



return this.fullname;


}

}
};
console.log(obj.prop.getFullname()); 
// 函数的最终调用者 obj.prop 
   
var test = obj.prop.getFullname;
console.log(test()); 
// 函数的最终调用者 test() this-> window
   
obj.func = obj.prop.getFullname;
console.log(obj.func()); 
// 函数最终调用者是obj
   
var arr = [obj.prop.getFullname,1,2];
arr.fullname = "JiangHao";
console.log(arr[0]());
// 函数最终调用者数组

好了,这篇博客,我们了解了什么是面向对象、类和对象的关系、JS中声明类与对象的步骤,以及重点讲解的this指向问题! 希望能够帮助大家真正的理解了this的认知,下面我会继续给大家分享关于面向对象方面的问题。多谢大家的支持!!!

以上这篇老生常谈JavaScript面向对象基础与this指向问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 #Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 #jQuery
JS继承与闭包及JS实现继承的三种方式
Oct 15 #Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 #Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 #Javascript
JS中的多态实例详解
Oct 15 #Javascript
vue跨域解决方法
Oct 15 #Javascript
You might like
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
vue中过滤器filter的讲解
2019/01/21 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
Python中unittest用法实例
2014/09/25 Python
Python中集合类型(set)学习小结
2015/01/28 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
python glom模块的使用简介
2021/04/13 Python