js之面向对象
本文的面向对象分为ES6和ES6之前的,重点学习ES6的
===============================
一、面向对象
1、什么是面向对象
a)什么是对象:万物都可以抽象成对象
时间对象
var oDate=new Date();(我们经常var的oDate就是一个时间对象)
oDate.getFullYear();(新建的oDate就继承了Date里面的所有方法)
数组
var arr=new Array();
arr.sort();
arr.length;
json{
name:'aa',
showName:function(){
alert(1);
}
}
json.name;(json对象的属性)
json.showName();(json对象的方法)
b)面向对象是一种思想:
我们只关心怎么去用,不关心里面是怎么实现的
提高了效率
2、怎么去面向对象
a)先要有一个对象
对象都有特征,都有属性和方法
属性 属性就是变量,只不过他有依附关系
特征 变量 自由的,独立的
方法 就是函数,只不过他有依附关系
函数 独立的
b)造对象
1、var arr=[];
批量造对象
c)构造函数:用来造对象的函数,构造函数也是函数,只是因为用途而得名,为了和普通函数做区别,首字母大写就是构造函数
d)this 想要学好面向对象 必须知道this指向谁
new是干什么的
1、会在构造函数开始的位置创建一个空对象(并且把this指向空对象);
2、自动返回空对象
e)属性不同的,方法是相同的
是ES6之前面向对象的核心:原型
f)面向对象怎么写: 构造原型混合模式
1、构造身上加属性
2、原型身上加方法 prototype
function Person(name,age){
//添加属性和方法
this.name=name;
this.age=age;
}
Person.prototype.showName=function(){
alert('我是舞王'+this.name);
};
g)prototype 也是对象
1、写面向对象是为了扩展系统方法
h)arr.indexOf()
练习题:
时间对象里面 getDay 0-6 0星期天
getCnDay 星期一 --- 星期日
-----------------------------------
二、总结:
1.什么是对象:
一切都是对象
2.什么是面向对象:
只关心怎么调用,不关心怎么实现的
3.怎么写一个类 就是一个构造函数
属性加在构造身上
方法加在原型身上
function Person(...){
this.XX=XXX //加属性
}
Person.prototype.XXX=function(){}; //加方法
4.怎么去造一个对象
new 类名()
eg var barry=new Person();(barry获得person的属性和方法)
5.new 都干了什么
1)、造一个空对象,并把this指向对象
2)、返回这个对象
6.prototype原型:
1)、可以写面向对象
2)、可以扩展系统的方法
7.原型和原型链的区别
原型prototype 就是一个对象,存在于每个对象身上
原型链:就是因为有prototype的存在,js产生了原型链
8.ECMAScript 里面的方法都是用原型写的
类 在js里面类就是构造函数
实例 构造函数调用完返回的对象
9.面向对象--一种思想
10.面向对象的特征:
封装 抽象了事物的核心
多态 一个事物可以继承多个亲属的特征
继承 事物得到了父亲的一些特征
-----------------------------------
11.object
instanceof 检测一个物体的血缘关系
子级 instanceof 父级 返回true false
constructor 物体是由那个构造器诞生的
子级.constructor==父级 返回true false
包装类(是java里面的)
简写的数据类型object不认。
12.this 有优先级 从上到下,优先级变小
new object
定时器 window
事件 触发事件的对象
对象 对象
show() window
13.继承 子级继承父级的功能
给父级一个功能,子级默认就有
玩继承:
属性
在子级的构造中,调用父级的构造
function 子级(name,age){
//父级.call(this,name,age);
父级.apply(this,arguments);
}
方法
1、son.prototype=father.prototype;
问题:子级改了父级也改变
2、for(var name in father.prototype){
son.prototype[name]=father.prototype[name];
}
问题:孩子不认爷爷
3、 子级.prototype=new 父级();
问题:子级的孩子不认子级
终极版:子级.prototype.constructor=子级;
-----------------------------------------------
三、ES6
1.对象
let name='张三';
let json={
name,
showName(){
alert(this.name)
}
}
2.面向对象
class Person{ //类
constructor(name,age){ //构造 属性加在构造身上
this.name=name;
this.age=age;
}
showName(){
alert(this.name);
}
showAge(){
alert(this.age);
}
}
3.继承
class Student extends Person{
constructor(name,age,job){
super(name,age);//super在这里就是向上越级继承父级的属性
this.job=job;本身又加的属性
}
showJob(){
alert(this.job);
}
}
-------------------------------------------------
ES6之前构造函数里子级继承父级的属性
函数名.call(this的指向,参数。。。。)针对多个参数的情况,不确定数量
函数名.apply(this的指向,[参数,参数。。。。]);
------------------
对象引用
js为了节省空间,采取的一种行为;
var arr=[1,2,3];
var arr2=arr;
------------------
for-in 通过对象的属性进行循环
用来循环对象的。但是能用for循环就不用for-in
for var i=0;i<10;i++
-------------------
json{
"a":"1",
"b":"2",
"c":"3"
}
for(var v in json){
console.log(v);//打印出1,2,3
}
js之面向对象的更多相关文章
- JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[1]--(理解对象和对象属性类型)
一.介绍 老铁们,这次是JS的面向对象的编程OOP(虽然我没有对象,心累啊,但是可以自己创建啊,哈哈). JS高程里第六章的内容,这章内容在我看来是JS中很难理解的一部分.所以分成三篇博客来逐个理清. ...
- JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)
一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...
- JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)
一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...
- JS--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)
一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...
- JavaScript基础笔记(四) JS式面向对象
JS式面向对象 一.理解对象 一)属性类型 ECMA-262 第 5 版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征. ECMA-262 定义这些特性是为 ...
- JS--我发现,原来你是这样的JS:面向对象编程OOP[1]--(理解对象和对象属性类型)
一.介绍 老铁们,这次是JS的面向对象的编程OOP(虽然我没有对象,心累啊,但是可以自己创建啊,哈哈). JS高程里第六章的内容,这章内容在我看来是JS中很难理解的一部分.所以分成三篇博客来逐个理清. ...
- 学JS的心路历程-JS支持面向对象?(一)
昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特 ...
- js 之面向对象
对象 是什么? 对象就是一个整体,对外提供一些操作,比如:电视机(不用知道内部的构造,只知道怎么用) 面向对象 是什么? 使用对象时,只关注对象提供的功能,不关心内部细节,比如:操作电视机(只知道用遥 ...
- 探讨 JS 的面向对象中继承的那些事
最近学了 JS 的面向对象,这篇文章主要是探讨 JS 的面向对象中继承的那些事. JS中继承的特点: 1.子类继承父类: 2.子类可以用父类的方法和属性 3.子类的改变可以不影响父类 下面用一个例子来 ...
- 重学前端--js是面向对象还是基于对象?
重学前端-面向对象 跟着winter老师一起,重新认识前端的知识框架 js面向对象或基于对象编程 以前感觉这两个在本质上没有什么区别,面向对象和基于对象都是对一个抽象的对象拥有一系列的行为和状态,本质 ...
随机推荐
- eclipse安装STS遇到的问题
eclipse安装STS时,在eclipse marketplase中搜索STS没有结果,从官网下载STS包,然后安装提示找不到JAR包, 解决方式: eclipse需要和STS包版本一致,如果STS ...
- psutil 跨平台根据程序名杀进程
笔者在项目中遇到过需要根据进程名杀进程的需求,利用python库psutil实现了此功能. 模块地址: https://pypi.python.org/pypi/psutil/ psutil功能 ...
- app绘制手势密码 、九宫格分解
什么是九宫格? 即是我们常见的手势绘制.一共有9个点,让我们进行绘制手势.我们手动操作的时候,通过是按住第一个点,然后移动到最后一点,然后松开,就完成手势的操作,那么,如果要用自动化代码,来让其自动绘 ...
- python for dblp.xml
由于最近处理数据时涉及到dblp.xml,刚开始下载时dblp.xml只有300多M,但解压之后就有1.9G,没有什么东西能够打开,所以必须要用工具来处理,在python中sax包能够一边解析一边处理 ...
- Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境
技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供 ...
- mysql命令行查看建表语句
命令如下: SHOW CREATE TABLE tbl_name 例子: mysql> SHOW CREATE TABLE t\G . row ************************* ...
- 即时通讯App怎样才能火?背后的技术原理,可以从这5个角度切入
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云视频发表于云+社区专栏 关注公众号"腾讯云视频",一键获取 技术干货 | 优惠活动 | 视频方案 社交场景 ...
- AJAX unsupported media type 415错误处理
一.问题 在使用angular做请求拦截时,因为依赖循环的问题,在请求拦截中改为使用ajax来发起请求拿到我想要的数据,结果出现了415 Unsupported Media Type错误,由于很久没使 ...
- postman学习笔记(二)
昨天刚操作了一遍最简单的接口测试,今天就收到了俩json文件,一个是postman里导出的接口列表一个是环境变量.拿到的时候一脸懵逼,昨天还以为学会用postman测试接口了,今天才发现哪儿到哪儿呀. ...
- A Mini Locomotive(01背包变型)
题目链接: https://vjudge.net/problem/POJ-1976 题目描述: A train has a locomotive that pulls the train with i ...