老生常谈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 相关文章推荐
Javascript中自动切换焦点实现代码
Dec 15 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
jQuery操作css样式
May 15 jQuery
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 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
CI框架整合smarty步骤详解
2016/05/19 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python线程中对join方法的运用的教程
2015/04/09 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
公务员总结性个人自我评价
2013/12/05 职场文书
内业资料员岗位职责
2014/01/04 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
采购内勤岗位职责
2015/04/13 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS
Vue2.0搭建脚手架
2022/03/13 Vue.js
Elasticsearch 聚合查询和排序
2022/04/19 Python