OOP

最新推荐文章于 2024-05-14 04:15:29 发布

katsukichan

最新推荐文章于 2024-05-14 04:15:29 发布

阅读量2.8k

点赞数 1

分类专栏： Js

本文链接：https://blog.csdn.net/nep_chan/article/details/84937408

版权

Js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

了解面向对象

面向对象是利用对象进行编程的一种思想（Object-oriented programming,缩写:OOP）

javascript两种开发模式

面向过程
面向对象

对象的组成

属性(变量)：
对象有什么

方法(函数)：
对象能做什么

如何创建对象

字面量

{} 一般只用于创建单一对象

var person = {
	name: "katsuki",
	age:18
}

new Object()

一般只用于创建单一对象

工厂模式：将参数传入函数内，函数内生成对象，给对象设置属性及方法（具体值来自传入的参数），最后将对象通过return返回出去。
* 优点:解决了重复创建多个同一类型对象的问题
* 缺点：没有解决对象识别的问题（对象的类型都是Object）。

function createPerson(name,gender){
    var person = new Object();
    person.name = name;
    person.gender = gender;
    person.hello = function(){
        console.log("katsuki,desu");
    };
    return person;
}
var p1 = createPerson("katsuki","女");
console.log(p1);

自定义构造函数（重点）

自定义构造函数与普通函数定义没有区别，唯一不同的是执行方式不同
- 函数名() ==>普通函数，若没有return，则返回值为undefined
- new 函数名() ==>构造函数
执行new构造函数时的四大步骤：

重点
  1. 在构造函数内部声明了一个对象o
  2. 将构造函数的this指向上面声明的对象o
  3. 给this绑定属性及方法，相当于给对象o绑定
  4. 将this对象返回出去

优点：
- 解决了重复创建多个同一类型对象的问题
- 解决了对象的识别问题
约定：构造函数定义时，首字母大写

function Kasami(name,gender){
// var o = new Object();
// Kasami.bind(katsuki); this指向当前实例对象
    this.name = name;
    this.gender = gender;
    this.hello = function(){
        console.log("katsuki,desu");
    };
//return this;
}
var katsuki1 = new Kasami('katsuki',18);//this指katsuki1
console.log(katsuki1);

构造函数与普通函数的区别

唯一区别：调用方式不同
任何函数，只要通过new操作符来调用，它就可以作为构造函数；
而任何构造函数，如果不通过new 操作符来调用，那它跟普通函数无区别。
约定：构造函数名首字母大写

this

只有这些情况，实在看不出就排除法，既不是对象、事件驱动和构造函数调用就指向window
1.函数自执行：this指的是执行函数的对象
（1）一般省略了对象调用的函数，this指的是window
（2）对象.函数(),this指的是前面的对象
2.事件驱动函数:this指的是函数绑定的元素对象
3.new 构造函数()的this指的就是当前实例对象

function show(){
   console.log(this);
}
window.show();//this==>window

var obj = {};
obj.show = show;
obj.show();//this==>obj

setTimeout(function(){
   console.log(this);//this==>window
})

btn.onclick = function(){
   console.log(this);//this==>btn
}

对象的组成部分

1.构造函数
function 函数名(){通过this定义属性及方法}
2.实例对象
new 构造函数() 产生的对象称为实例对象
实例对象能拷贝构造函数的所有属性及方法
实例对象可以使用其原型对象的所有方法
3.原型对象
原型对象都拥有一个constructor属性(构造器)，指向构造函数
构造函数通过prototype属性指向原型对象
实例对象通过__proto__指向原型对象

实际运用
(一)解决方案:构造函数+原型对象

使用构造函数添加私有属性
使用原型对象添加共享方法

(二)优点

实例对象都有自己的独有属性
实例共享了原型中的方法，最大限度的节省了内存
支持向构造函数传递参数

function Katsuki(name,age){
	//本身的this无指向，哪个实例对象调用，this就是哪个
	this.name = name;
	this.age = age;
}
//构造函数通过prototype属性指向原型对象
Katsuki.prototype.hello = function(){
	//跟随Katsuki的this
	console.log(this.name + this.age + "desu");
}
var katsuki1 = new Katsuki("katsuki","18");
var katsuki2 = new Katsuki("katsuki","19");
//实例对象通过__proto__指向原型对象,第二个通用
console.log(katsuki1.__proto__);
console.log(Object.getPrototypeOf(katsuki1));
//调用输出katsuki18desu 
katsuki1.hello();
//调用输出katsuki19desu
katsuki2.hello();

对象的组成部分

弹幕案列

样式结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<style>
	    .container{width:800px;margin:0 auto;padding-bottom:10px;background-color:#dfdfdf;}
	    #barrage{position:relative;height:520px;margin-bottom:10px;background-color:#000;overflow:hidden;}
	    #barrage .bar-item{position:absolute;left:100%;white-space:nowrap;}
	    #msg{margin-left:10px;width:400px;height:30px;border:1px solid #999;border-right:none;box-sizing:border-box;vertical-align:middle;}
	    #msg+button{padding:0 10px;height:30px;vertical-align:middle;}
	</style>
	<!--common.js里面有封装动画函数、随机数函数和随机颜色函数-->
	<script src="../common.js"></script>
	<script src="../barrage.js"></script>
<script>
<script>
</head>
<body>
    <div class="container">
        <div id="barrage"></div>
        <input type="text" id="msg"><button>发送</button>
    </div>
</body>
</html>

barrage.js

document.addEventListener('DOMContentLoaded',function(){
	// 1.页面对象page（一个）
	//  * 属性：显示框、输入框、按钮
	//  * 方法：
	//      *初始化：获取元素
	//      *显示:点击按钮，获取内容，生成弹幕实例
	// 2.弹幕对象Barrage（多个）
	//  * 属性：颜色、字体大小、垂直方向位置、速度
	//  * 方法：
	//      初始化:生成一个span,给span添加样式、内容、类名，追加到页面#barrage里面
	//      移动：改变span的left值（动画），当left值为-span.offsetWidth,移除span
	//      移除: 让爸爸把我删掉
	var page = {
		screen : "#barrage",
		msg : "#msg",
		btn : "#msg+button",
		create : function(){
			console.log(this.screen);//#barrage
			this.screen = document.querySelector(this.screen);
			console.log(this.screen);//<div id="barrage"></div>,
			//之后page.screen就是该标签，#barrage被重新赋值覆盖，下面同理
			this.msg = document.querySelector(this.msg);
			this.btn = document.querySelector(this.btn);
			this.show();
		},
		show : function(){
			this.btn.onclick = () => {
				//这里的this需要指向page,若不使用箭头函数定义会指向window
				var _msg = this.msg.value;
				new	Barrage(_msg);
			}	
		}
	function Barrage(msg){
		this.msg = msg;
		//随机颜色数字封装
		this.color = getRandomColor();
		this.fontSize = getRandomNum(12,20); 
		this.speed = getRandomNum(30,60);
		//弹幕随机高度要减去本身内容高度，其高度由字体大小撑起
		this.top = getRandomNum(0,page.screen.offsetHeight-this.fontSize-10);
	}
	Barrage.prototype.init = function(){
		this.span = document.createElement("span");
		this.span.innerHTML = this.msg;
		this.span.style.color = this.color;
		this.span.style.fontSize = this.fontSize + 'px';
		this.span.style.top = this.top + 'px';
		this.span.classList.add("bar-item");
		page.showArea.appendChild(this.span);
		this.move();//this为实例对象
	}
	Barrage.prototype.move = function(){
		// 动画封装
		// 封装内容的对应博客链接
		// https://blog.csdn.net/nep_chan/article/details/84586720#t8
       animation(this.span,{left:-this.span.offsetWidth},50,()=>{
           this.remove();
       })
    }
    Barrage.prototype.remove = function(){
       this.span.parentElement.removeChild(this.span);
    }
	page.create();
})

对象的属性特性（ES5）

configurable
可配置性，控制着其描述的属性的修改，表示能否修改属性特性
enumerable
可枚举性，表示能否通过for-in遍历得到属性
writable
可写性，表示能否修改属性的值
value
数据属性，表示属性的值。默认值为undefined

通过.或者[]给对象添加的属性，拥有的属性特性默认值都为true（除了value为具体的值）
给对象添加属性及属性特性的方法：Object.defineProperty(obj, property, descriptor)，这种方式设置，拥有的属性特性默认值为false（除了value为具体的值）

var obj = {
    name : "katsuki",
    age : 18
};
Object.defineProperty(obj,"gender",{value:"女",configurable:true});

katsukichan

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
OOP

面向对象及this内容
复制链接

扫一扫

专栏目录