面向对象编程| JavaScript学习（一）

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

创建对象

new objec()

var perple = new object()
people.name = "张三"
people.age = 20
person.sayName = function () {                //对象里的函数，以方法的形式调用
  console.log(this.name)
  }

字面量法

var people = {
    name: 张三,
    age； 20
}

工厂法创建

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

构造函数法

var function CreatePeople(name,age){
    this.name = name,
    this.age = age

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

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

构造函数的特点

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

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

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

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)

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

通过构造器方式（不推荐）
对象 instanceof 构造函数名字

面向对象编程

<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__ 指向构造器

原型作用

数据共享，节省内存空间

原型对象可以相互调用

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()

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

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
 * 
 */

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

////立即执行函数
// (function(){
//     var num = 10

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

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

所以把局部变量转换为全局变量，可以把局部变量变为全局（window）的属性