JS面向对象介绍

首先面向对象是什么?为什么要使用面向对象。

因为JavaScript对每个创建的对象都会自动设置一个原型(谷歌火狐中是proto),指向它的原型对象prototype,举个例子:

function persoon(){}

那么person的原型链就是:

person(proto) > Function.prototype(proto) > Object.prototype

所以最终的结果都是指向原型对象,就称为面向对象

那么问题来了,怎么面向对象呢?实际上就是在问怎么创建面向对象,创建面向对象有哪几种方法。

方法一:工厂模式创建

本质:就是在函数内部创建一个对象,每次调用的时候传入不同的参数,然后返回这个对象

 function Factory(name, age) {

            let obj = {};
obj.name = name;
obj.age = age;
obj.sayHi = function () {
console.log("hello world");
}
return obj;
} let obj = Factory("小小荧", 22);
console.log(obj);

方法二:构造函数方式创建

本质:跟工厂模式的区别就是函数中用this替换了return的作用,还有一个区别就是创建对象的时候是new一个对象

function Person(name, age) {

            this.name = name;
this.age = age;
this.sayHi = function () {
console.log(this.name, this.age);
}
} let person1 = new Person("小小荧", 22);
let person2 = new Person("哈哈哈", 23);
console.log(person1);
console.log(person2)

方法三:原型方式的创建

本质:先通过创建一个函数Function,然后在通过Function.prototype上添加属性和方法,在new一个Function这种方式一个对象

  function Person(name, age) {

            this.name = name;
this.age = age; this.say = function(){
console.log("hello world");
} } // 在构造函数原型中写共享的属性和方法
Person.prototype.sing = function(){
console.log("唱歌")
}
let person1 = new Person("小小荧", 22);
console.log(person1);
person1.say();
person1.sing();
let person2 = new Person("哈哈哈", 23);
console.log(person2)
person2.say();
person2.sing()

那我们如何证明一下原型上的sing方法是共享的呢在上图中的person1和person2下的proto下的都存在sing方法,person1和person2调用sing方法的时候会在自己的实例对象中查找sing方法如果没有就回去prototype中查找,查找到我们就调用该方法,如果找到顶层对象都没有找到这个方法就是返回undefined。所以perosn1和person2调用sing的时候调用的是同一个sing方法,这就是证明了sing是方法共享的。

面向对象案例演示

tab选项卡面向对象案例
<!DOCTYPE html>
<!--
* @Descripttion:
* @version:
* @Author: 小小荧
* @Date: 2020-03-17 21:30:55
* @LastEditors: 小小荧
* @LastEditTime: 2020-03-17 21:43:50
-->
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
width: 360px;
height: 277px;
border: 10px solid #000;
overflow: hidden;
margin: 0 auto;
} .content {
height: 257px;
text-align: center;
line-height: 257px;
font-size: 100px;
position: relative;
} .box {
width: 100%;
height: 100%;
position: absolute;
background: #fff;
display: none;
} button.active {
color: aliceblue;
background: black;
} .box.active {
display: block;
z-index: 1;
}
</style>
</head> <body>
<div class="container">
<div class="btns">
<button data-index="0" class="btn active">1</button>
<button data-index="1" class="btn">2</button>
<button data-index="2" class="btn">3</button>
</div>
<div class="content">
<div class="box active">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</div>
<script> // 选项卡的构造函数
function Table() { } // 初始化函数
Table.prototype.init = function (options) { this.btns = this.$(options.btn);
this.boxs = this.$(options.box);
// 绑定事件
this.bindEvent(); } // 选择器函数
Table.prototype.$ = function (seletor) {
// 返回元素节点
return document.querySelectorAll(seletor);
} // 事件监听器函数
Table.prototype.bindEvent = function () { // 循环节点
for (var i = 0; i < this.btns.length; i++) {
this.btns[i].addEventListener("mouseover", function (index) { // 删除class类名
this.removeClassName(); // 添加class类名
this.addClassName(index);
}.bind(this, i));
}
} // 删除class类名函数
Table.prototype.removeClassName = function () { // 循环删除active的类名
for (var i = 0; i < this.btns.length; i++) {
this.btns[i].className = this.btns[i].className.replace(/\s?active/, "");
this.boxs[i].className = this.boxs[i].className.replace(/\s?active/, "");
} } // 添加class类名函数
Table.prototype.addClassName = function (index) {
// 给节点添加active的class类名
this.btns[index].className += " active";
this.boxs[index].className += " active";
} var table = new Table();
table.init({
btn : ".btn",
box : ".box"
});
</script>
</body> </html>

漫天萤火虫
<!DOCTYPE html>
<!--
* @Descripttion:
* @version:
* @Author: 小小荧
* @Date: 2020-03-17 21:44:07
* @LastEditors: 小小荧
* @LastEditTime: 2020-03-22 14:19:09
-->
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
} .container {
width: 600px;
height: 400px;
background: #000000;
margin: 50px auto;
position: relative;
} .disc {
display: block;
width: 4px;
height: 4px;
background: #ffffff;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
opacity: 1;
border: 1px solid #ffffff
}
</style>
</head> <body>
<div class="container">
</div>
<script src="./多属性运动.js"></script>
<script> // 定义一个小圆点的构造函数
function Disc(options) {
this.init(options)
}
// 初识化的方法
Disc.prototype.init = function (options) {
// 这个就是初始化的时候这是一个计数的属性,后面可以用来判断就完成透明的切换
this.count = 0;
// 父盒子的宽度
this.box_width = options.box_width;
// 父盒子的高度
this.box_height = options.box_height;
// 父盒子
this.box_ele = options.box_ele; // 创建节点
this.createEle();
} // 生成随机坐标
Disc.prototype.randomPos = function () {
// x 坐标
this.x = Math.round(Math.random() * (this.box_width - this.disc_ele.offsetWidth));
// y坐标
this.y = Math.round(Math.random() * (this.box_height - this.disc_ele.offsetHeight));
} // 创建每一个元素的函数
Disc.prototype.createEle = function () {
// 创建每一个小圆点的元素节点
this.disc_ele = document.createElement("span");
// 设置className
this.disc_ele.className = "disc";
// 像父盒子中追加元素节点
this.box_ele.appendChild(this.disc_ele); // 获取随机的xy值
this.randomPos(); // 设置这个元素的xy值 this.disc_ele.style.left = this.x + "px"; this.disc_ele.style.top = this.y + "px"; // 创建完成之后我们就需要移动了 this.move(this.disc_ele); } // 执行运动函数
Disc.prototype.move = function (ele) {
// 我们默认opacity是0.6的透明度
var opacity = 0.6;
if (this.count % 2) {
// 如果运动的次数是奇数,我们就让这个透明度变为1
opacity = 1;
}
// 每次执行都需要count++
this.count++;
this.randomPos();
animate(ele, {
top: this.y,
left: this.x,
opacity: opacity
}, () => {
this.move(ele);
});
} var box_ele = document.querySelector(".container");
var box_width = box_ele.offsetWidth;
var box_height = box_ele.offsetHeight; //循环穿件元素节点
for (var i = 0; i < 80; i++) { // 创建对象
var disc = new Disc({
box_ele: box_ele,
box_width: box_width,
box_height: box_height
}); } </script>
</body> </html>

这个案例需要使用到运动函数请参考运动函数

JS面向对象介绍的更多相关文章

  1. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  2. 浅谈JS面向对象之创建对象

    hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...

  3. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  4. js面向对象、创建对象的工厂模式、构造函数模式、原型链模式

    JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...

  5. JS面向对象编程:对象

    一般面向过程的写法都是写很多function,坏处:1.代码复用不好 2.函数名称容易重复冲突 下面介绍面向对象的写法: 在JS中每个函数function都是一个对象. 比如,下面这个就是一个对象,我 ...

  6. js面向对象设计之class继承

    EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建立在旧的原型系统上的语法糖,所以它们并没有带来任何的新特性 ...

  7. js面向对象设计之function类

    本文仅探讨如何合理的使用 function 在 javascript中实现一个面向对象设计的类.总所周知,javascript 并不能实现一个真正意义上的类,比如 protect 比如 函数重载.下面 ...

  8. js面向对象理解

    js面向对象理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是, ...

  9. 【重温基础】15.JS对象介绍

    从这篇文章开始,复习 MDN 中级教程 的内容了,在初级教程中,我和大家分享了一些比较简单基础的知识点,并放在我的 [Cute-JavaScript]系列文章中. 关于[Cute-JavaScript ...

随机推荐

  1. 使用tf serving-gpu时,没有安装NVIDIA时报的错?

    当部署tf serving-gpu时,出现上述的错误,有两种情况: 1.服务器中已经安装NVIDIA驱动了,只是版本比较低了,需要升级一下比较新的nvidia驱动: 2.就是服务器中没有安装NVIDI ...

  2. Sketchup二次开发教程

    Sketchup提供了两套API: C API,主要用于读写SU文件.我们的SU文件导入功能就是用这套API做的 Ruby API,用于开发SU插件 这次我们主要关注Ruby API,因为它是实现更丰 ...

  3. 老式车载导航如何支持大于4G的SD卡

    这个知识点以后会越来越没什么用,因为这类导航慢慢就会消失.记录这个,就是提醒自己如何防止以为很懂而被骗. 随着导航地图越来越大,4G的SD卡很快就不够用了,但是很不幸车载导航款式太老了,不支持大于4G ...

  4. http2 技术整理 nginx 搭建 http2 wireshark 抓包分析 server push 服务端推送

    使用 nginx 搭建一个 http2 的站点,准备所需: 1,域名 .com .net 均可(国内域名需要 icp 备案) 2,云主机一个,可以自由的安装配置软件的服务器 3,https 证书 ht ...

  5. 事务特性,事务的隔离级别以及spring中定义的事务传播行为

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  6. Spark入门(四)--Spark的map、flatMap、mapToPair

    spark的RDD操作 在上一节Spark经典的单词统计中,了解了几个RDD操作,包括flatMap,map,reduceByKey,以及后面简化的方案,countByValue.那么这一节将介绍更多 ...

  7. python3.4.3 连接Oracle生成报表并发送邮件

    python很简单,又很实用.当有需求时用起来会更有方向,大可不必从语法.循环等基础看起. 由于工作需要,每天要拉一份报表发给业务的同事,先是用SSIS做了个包部署到服务器上,每天定时拉报表发邮件给同 ...

  8. jQuery万能放大镜插件(普通矩形放大镜)

    插件链接:http://files.cnblogs.com/files/whosMeya/magnifier.js 1.在jquery下插入. 2.格式:magnifier("需要插入的位置 ...

  9. 通过js自动判断移动终端设备(ios\android等)

    当用户用移动设备扫描一个二维码是,将扫描后的链接链接到一个页面,该页面只包含判断移动终端设备的js,判断好后自动跳转到对应的链接 或下载对应的内容. html代码如下: <script> ...

  10. 深入理解计算机系统 (CS:APP) - 高速缓存实验 Cache Lab 解析

    原文地址:https://billc.io/2019/05/csapp-cachelab/ 这个实验是这学期的第四个实验.作为缓存这一章的配套实验,设计得非常精妙.难度上来讲,相比之前的修改现成文件, ...