0%

面向对象编程| JavaScript高级学习(一)

JavaScript不是面向对象语言,是基于对象语言。

创建对象

  1. new objec()

    1
    2
    3
    4
    5
    6
    var perple = new object()
    people.name = "张三"
    people.age = 20
    person.sayName = function () { //对象里的函数,以方法的形式调用
    console.log(this.name)
    }
  1. 字面量法

    1
    2
    3
    4
    var people = {
    name: 张三,
    age; 20
    }
  1. 工厂法创建

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function createPerson(name,age,gender){
    //创建一个新的对象
    var obj = new Object();

    //向对象中添加属性
    obj.name= name;
    obj.age = age;
    obj.gender = gender;
    //将新对象返回
    return obj;
    }
    var obj1 = createPerson("李四",20,"男")

    此方法创建的对象类型都是Obj不易区分,typeof(obj1) == Obj

  2. 构造函数法

    1
    2
    3
    4
    5
    6
    7
    var function CreatePeople(name,age){
    this.name = name,
    this.age = age

    } //一般首字母大写
    var people1 = new CreatePeople("张三",20)
    console.log(people instanceof Createpeople) //true

    使用instanceof可以检查一个对象是否是一个类的实例

    构造函数的特点

    1. 函数体内部使用了this关键字,代表了所要生成的对象实例
    2. 生成对象的时候,必须使用new命令

构造函数与实例对象的关系

实例对象是通过构造函数创建的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}

function Dog(name,age){
this.name = name;
this.age = age;
}
//普通函数调用
//var per = Person();

//构造函数调用
var per = new Person("孙悟空",18,"男");
var per2 = new Person("哪吒",3,"男");
var per3 = new Person("玉兔",16,"女");
var dog = new Dog();

console.dir(Person);
console.log(per);
console.log(per2);
//实例对象的构造器(构造函数)
console.log(per.constructor == Person) //true
console.log(per.__proto__.constructor == Person.prototype)

所以判断对象是不是这个数据对象的两个方法

  1. 通过构造器方式(不推荐)
  2. 对象 instanceof 构造函数名字

面对对象编程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style type="text/css">
#dv {
width:400px;
height:400px;
background-color: red;
}
</style>

<div id="dv" ></div>
<button id="btn" type="button"></button>

<script>
function ChangeStyle(btnObj,divObj,json){
this.btnObj = btnObj
this.divObj = divObj
this.json = json
}

ChangeStyle.prototype.init = function(){
//点击按钮,改变div多个样式属性值
var that = this
this.btnObj.onclick = function(){
for(var key in that.json){
that.divObj.style[key] = that.json[key]
console.log(key)
}
}
}

//实例化对象
var json = {"width":"500px","height":"600px","background":"black"}
function my$(id) {
return document.getElementById(id);
}

var becomeBlue = new ChangeStyle(my$("btn"),my$("dv"),json)
//调用方法
becomeBlue.init()
</script>

根据需求,抽象出相关的对象,总结对象的特征和行为,把特征变为属性,把行为变成方法,然后定义构造函数,实例化对象,通过调用

原型

构造函数的prototype属性就是原型对象,

实例对象可以调用构造函数的原型中的方法。__proto__ 指向构造器

原型作用

  1. 数据共享,节省内存空间

原型对象可以相互调用

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name){
this.name = name;

}
Person.prototype.eat = function(){
console.log("今天我要吃番茄")
this.play() //在eat中调用play
}
Person.prototype.play = function(){
console.log("今天我要da游戏")
}
var peo1 = new Person("zhangsan")
peo1.eat()

实例对象的属性或者方法的层层遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function MyClass(sex){
this.sex= sex;

}

//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的对象";


console.dir(MyClass)
var mc = new MyClass();
//console.log(mc.name);
//使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
console.log("name" in mc);

//可以使用对象的hasOwnProperty()来检查对象中是否含有该属性
//只有当对象自身中含有属性时,才会返回true
console.log(mc.hasOwnProperty("age"));

/**
* 原型对象也是对象,所以它也有原型,
* 当我们使用一个对象的属性或方法时,会在自身中寻找,
* 自身如果有,则直接使用
* 如果没有则去原型对象中寻找
* 如果没有则去原型的原型中寻找,直到找到Object对象的原型,
* Object对象的原型没有原型,如果Object中依然没有找到,则返回undefined
*
*/

把局部变量转变为全局变量

1
2
3
4
5
6
7
8
9
10
11
12
////立即执行函数
// (function(){
// var num = 10

// })()
// console.log(num)

(function(win){
var num = 10
window.num = num;
})(window)
console.log(num)

所以把局部变量转换为全局变量,可以把局部变量变为全局(window)的属性