JS面向过程和面向对象
2020-03-30 本文已影响0人
橙赎
一、面向对象和面向过程
-
面向过程：面向过程专注于如何去解决一个问题的过程步骤
-
面向对象：把解决问题的关注点，放到解决问题需要的一些对象身上。
举例简单说明：把html_javascript_css这句话分割成[html,javascript,css]，分别用面向过程和面向对象的思想来写这个例子。
面向过程：
const splitStrOne = () => {
let s = 'html_javascript_css'; // [html,javascript,css]
//分析: 遍历每一个字符，判断是否_，如果不是_，拼接成字符串存储入数组，
let array = []
let str = '';
for (let i = 0; i < s.length; i++) {
const item = s.charAt(i);
if (item != '_') {
str = str + item; //str: h str:ht str:htm str:html str:html str:css
} else {
array.push(str); // [html]
str = '';
}
if (s.length - 1 == i) {
array.push(str); // [html]
str = '';
}
}
console.log(array);
}
面向对象：
const splitStrTwo = ()=>{
let s = 'html_javascript_css'; // [html,javascript,css]
const array = s.split('_');
console.log(array);
}
splitStrTwo();
、创建对象的方式
new Object()
let People = new Object();
People.name = '小明';
People.age = 12;
People.Say = function () {}
- 字面量
// 字面量
let People1 = {
name: '小明',
age: 12,
Say = function () {}
}
let People2 = {
name: '小花',
age: 14,
Run = function () {}
}
- 工厂函数
// 工厂函数
function CreatePople(name,age) {
return{
name:name,
age:age,
Say:function(){}
}
}
let poe1 = CreatePople('小明',13)
- 构造函数
// 构造函数
function People(name, age) {
this.name = name;
this.age = age;
this.Say = function () {}
}
let p1 =People('小明',23)
三、js的prototype、_proto_、constructor的三角关系
先上图每个对象的原型(
__proto__)都指向自身的构造函数(constructor)的prototype属性
-
构造函数：用来初始化新创建的对象的函数是构造函数。
-
原型对象：构造函数有一个
prototype属性，指向实例对象的原型对象。通过同一个构造函数实例化的多个对象具有相同的原型对象。 -
实例对象：通过构造函数的new操作创建的对象是实例对象。可以用一个构造函数构造多个实例对象
-
constructor：原型对象有一个constructor属性，指向该原型对象对应的构造函数。由于实例对象可以继承原型对象的属性，所以实例对象也拥有constructor属性，同样指向原型对象对应的构造函数。
+_proto_：实例对象有一个proto属性，指向该实例对象对应的原型对象
写一个简单例子来说明构造函数、原型对象、实例对象：
<body>
<button id="btn">点击</button>
<div id="app"></div>
<script>
const btnEle = document.getElementById('btn');
const appEle = document.getElementById('app');
// 构造函数
function appColor() {}
// 原型对象
appColor.prototype.init = function (btnEle, appEle, properValue) {
btnEle.onclick = function () {
for (const key in properValue) {
appEle.style[key] = properValue[key]
}
}
}
let properValue = {
backgroundColor: 'red',
height: '200px',
width: '200px',
borderRadius: '50%'
}
// 实例对象
new appColor().init(btnEle, appEle, properValue)
</script>
</body>
- 使用原型的注意事项：
//这样定义是错误的，Person.prototype丢失构造器constructor，被新添加的对象覆盖
Person.prototype = {
name: "小明",
age: 12,
study: function () {}
}
//正确的原型对象定义需要加上constructor--手动修改构造器的指向
Person.prototype = {
constructor: Person,
name: "小明",
age: 12,
study: function () {}
}
