0%

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

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

创建对象

  1. new objec()

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

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

    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. 构造函数法

    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命令

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

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

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 构造函数名字

面向对象编程

<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. 数据共享,节省内存空间

原型对象可以相互调用

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)的属性