面向对象编程

面向对象编程

面向过程：注重过程，解决问题的思路，关注点在解决问题的这个过程

面向对象：解决问题的思想，关注点在于指挥哪个对象，做哪件事情

找一个对象，让对象执行

面向对象的三大特性：封装，继承，[多态]

封装//函数：封装代码；对象：把一些属性和函数封装到一个对象中

继承//js的继承，拿来主义，一个对象没有这个属性或者方法，通过某些手段，能够直接用另一个对象的属性和方法

[多态]：强类型语言才有，js中没有多态

案列：

//1. 获取到所有的div

var divs = document.getElementsByTagName("div");

//2 .遍历这些div

for(var i = 0; i < divs.length; i++) {

//3. 给每一个div添加边框

divs[i].style.border = "1px solid black";

}

var ps = document.getElementsByTagName("p");

for(var i = 0; i < ps.length; i++) {

ps[i].style.border = "1px solid black";

}

面向过程设置边框

面向对象设置：

var $ = {

tag:function (tagName) {

return document.getElementsByTagName(tagName);

},

setBorder:function (elements) {

for(var i = 0; i < elements.length; i++) {

elements[i].style.border = "1px solid black";

}

}

}

//调用对象某个方法，完成某件事情

$.setBorder($.tag('div'));

$.setBorder($.tag("p"));

封装——调用执行

如何创建一个对象

1.内置构造函数创建一个空对象

var obj = new Object();

obj.name = name...

......

2.对象字面量创建：

var obj = {

name:'zs',

....

}

3.工厂函数：函数封装

//工厂函数：每次调用，都会创建出来一个对象。

function createPhone(brand, color, size){

//创建了一个对象

var obj = {

brand:brand,

color:color,

size:size,

call:function () {

console.log("打电话");

}

};

return obj;

}

var hw = createPhone("华为", "blue", "5.7");

hw.call();

4. //js内置了一些构造函数 Array Date String Math

//需要自己定义构造函数

//什么是构造函数？ 构造函数就是一个函数

// 1. 构造函数首字母大写

// 2. 构造函数的作用： 实例化对象(给this添加属性和方法)

// 3. 构造函数一定要配合new关键字使用

function Phone(brand, color, size){

this.brand = brand;

this.color = color;

this.size = size;

this.call = function () {

console.log("打电话");

}

}

//new关键字：

//1. new会在内存开辟一块新的空间，创建一个空的对象

//2. 让构造函数的this指向这个新的对象

//3. 会调用构造函数

//4. 会返回新对象。

//new：

//1. 创建一个空对象

//2. 让构造函数的this指向这个空对象

//3. 调用构造函数

//4. 返回新对象

//构造函数

//实例化对象： 给this添加属性和方法。

var hw = new Phone("华为", "蓝色", "5.7");

hw.call();

var njy = new Phone("诺基亚", "黑色", "2.0");

njy.call();

构造函数有问题么？

有。

如果行为函数多了之后，调用之后，每个new调用之后会创建新的function，虽然行为看似一样，但是地址却不一样了，所以会占用内存，需要再改进