老生常谈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 相关文章推荐
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
屏蔽script注入小例子
Nov 12 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
用php解析html的实现代码
2011/08/08 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
js实现旋转木马效果
2017/03/17 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python fabric实现远程部署
2017/01/05 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
python如何调用php文件中的函数详解
2020/12/29 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
学生会竞选演讲稿学习部
2014/08/25 职场文书
劳模事迹材料范文
2014/12/24 职场文书
先进工作者个人总结
2015/02/15 职场文书
教师党员自我评价范文
2015/03/04 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
社区活动总结范文
2015/05/07 职场文书
民主生活会意见
2015/06/05 职场文书
个人收入证明格式
2015/06/24 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
python计算列表元素与乘积详情
2022/08/05 Python