JS

1、面向对象的概念
从编程思想角度解释:
面向过程的编程思想,关注的是解决问题的步骤,
面向对象的编程思想,关注的是解决问题需要的对象。
面向对象的编程思想继承于面向过程。
从编程语言的角度解释:
面向对象的编程语言,必须有‘类’和‘对象’这两个概念,并且对象是经由类创建出来的;还需要有‘继承’,‘封装’,‘多态’三个特征。
js语言不符合以上条件,但是有‘对象’的概念,所以他是一门基于对象的编程语言。
js和面向对象的关系:利用面向对象的编程思想来指导js代码的书写方式。
2、使用js创建对象的方法
1)字面量创建对象
优势:快捷、直观、方便
劣势:需要创建多个对象时,代码冗余

 var per = {
                name: 'xiaoWang',
                age: 23,

                sayHi: function () {
                    alert('hello');
                }
            };
            //  访问对象的属性:
            //  1.对象名+'.'+属性名
            //  2.对象名+[]+属性名字符串
            alert(per['name']);
            per.sayHi()

2)工厂方法创建对象
工厂模式:通过调用工厂,给工厂传递参数,则工厂就能批量生产对应的产品
优势:解决了代码冗余的问题
劣势:无法区分该对象的类型(如:系统类型,如number是Number()创建的,但是自定义类型无法获取到)

//  定义创建对象的工厂
        function creatPerson(name, age) {
            // 1.创建空对象
            var per = {};
            // 2.给空对象添加属性和方法
            per.name = name;
            per.age = age;
            per.sayHi = function () {
                alert(name +'hello')
            }
            // 把创建的对象返回出去
            return per;
        }

        var per1 = creatPerson('xiaoWang', 23);
        console.log(per1);
        // per1.sayHi();
        console.log(per1 instanceof creatPerson);

        var num = new Number();
        //  可以通过instanceof方法判断实例的类型
        console.log(num instanceof Number);
        var num1 = 23;
        console.log(num1 instanceof Number);

        var per2 = creatPerson('xiaoXuan', 18);
        console.log(per2);
        per2.sayHi();

3)构造函数创建对象
优势:解决了获取对象类型的问题,使用构造函数创建的对象自带一个
constructor,通过该属性获取对象的类型(还可以使用instanceof检测对
象是那个类型的实例:(personinstanceof Person),返回1个布尔值 )
劣势:内存占用有点大

    //  构造函数函数名首字母大写
            function CreatePreson(name, age) {
                // 把所有的属性和方法挂载在this指针上。将来this指向谁,这些属性和方法就添加在谁身上
                this.name = name;
                this.age = age;

                this.sayHi = function () {
                    alert(this.name + 'hello');
                };
            }

            //  调用构造函数创建对象
            //  new + 构造函数名
            //  new:通过new关键字调用的函数,new会首先在内存中开辟一块存储空间,然后把构造函数中的this指针指向这块存储空间,这样给this指针绑定的属性、方法,也就添加进了这块存储空间中。最后把存储空间的地址给per对象保存
            //  通过构造函数创建出来的对象可以借助相关方法判断归属关系。
            var per1 = new CreatePreson('xiaoXuan', 18);
            var per2 = new CreatePreson('xiaoWang', 23);
            per1.sayHi();
            console.log(per1 instanceof CreatePreson);//true

            console.log(per1.sayHi == per2.sayHi);//false

工厂模式和构造函数创建对象的区别:
1)构造函数没有显示的创建新对象
2)直接把属性和方法赋值给了this指针
3)构造函数没有return语句
4)使用构造函数穿建出来的对象可以标示这个对象属于哪一种类型
普通函数调用和构造函数调用的区别:
1)构造函数必须使用new操作符来创建新对象,如果像调用普通函数那样创建对象,就是在全局作用域中调用函数了,this指针会指向window对象。
3、如何使用对象
1)访问对象属性的两种方法:点语法和[]访问某一个属性
使用点语法访问属性,点后直接跟属性名
使[]访问属性,[]里是属性字符串(必须是字符串类型的数据)或保存
属性名字符串的变量
使用for...in...遍历对象的所有属性
for (var property in per1) {
console.log(property
+"="+ per1[property]);
}
3、继承
通过一个类(父类、父构造函数)创建出另一个类(子类、子构造函数),这样新创建出来的类不仅拥有了原有类的属性、方法、子类,而且也可以添加自己独有的属性、方法,子类也可以重写父类的方法。
1)通过call实现继承(借用构造函数实现继承)

function ClassA(name) {
this.name = name;
this.sayHi = function () {
alert("hello");
}
}
function ClassB(name) {
// call函数是Function下的1个方法,第1个参数表示要修改原函数中this指针的指向,第2个参数起,依次代表父构造器所需要的参数
ClassA.call(this, name);
// 添加新新法
this.sayBye = function () {
alert("bye-bye");
}
}
var cB = new ClassB("zhangsan");
cB.sayHi();

2)原型链实现继承

function Parent(name) {
this.name = name;
this.say = function () {
alert("hello");
}
}
function Child(age) {
this.age = age;
}
// 通过子类的原型指针,从父类继承相关的属性、⽅法:让子类的原型指针指向父类对象
Child.prototype = new Parent(‘张三’);
// 因为prototype中还包含1个constructor属性,这个属性用来指向prototype所在的构造函数,所以要把constructor指向的构造函数改回Child,保
证从该函数创建出的对象的constructor属性不会指向Parent
Child.prototype.constructor = Child;
var child = new Child(23);
alert(child.age);
child.say();

3)组合方式实现继承
实例属性使用CALL的方式继承,原型方法使用原型链方式继承

// 使用call/apply实现对实例属性的继承
        // 使用原型实现对原型芳法的继承
            function CreateAnimal(name, age) {
                this.name = name;
                this.age = age;
            }

            CreateAnimal.prototype.sayHi = function () {
                alert('hello');
            }


            function CreatePerson(name, age, gender) {
                CreateAnimal.call(this, name, age);
                this.gender = gender;
            }


            CreatePerson.prototype = new CreateAnimal();
            CreatePerson.prototype.constructor = CreatePerson;
            CreatePerson.prototype.eatFoot = function () {
                alert('吃饭了');
            }


            var per = new CreatePerson('zhengSAN', 18, 'MAN');
            // console.log(per.gender);
            per.sayHi();
            per.eatFoot();

4)通过冒充调用方式实现继承

// 父类
function ClassA(sColor) {
this.color = sColor;
this.show = function () {
alert(this.color);
}
}
var cA = new ClassA("red");
cA.show();
// 子类
function ClassB(sColor,age) {
// 通过冒充实现子类继承父类的方法、属性
this.newFn = ClassA; // 给this添加1个新的函数,也就是ClassA这个构造函数
this.newFn(sColor); // 执⾏新添加进去的函数,通过this.newFn调⽤ClassA,进⽽修改了ClassA中this指针的指向
delete this.newFn; // 修改完指针的指向后,就可以把新添加的这个⽅法删掉(过河拆桥)
// 继续添加新属性\方法
this.age = age;
}
var cB = new ClassB("green", 23);
cB.show();
console.log(cB.age);

4、百度模板的使用

            
        

    
    

5、鼠标拖拽相关属性
window.onload = function () {
var div = document.querySelector('#div');
div.onclick = function (ev) {
// clientX\clientY坐标系原点是浏览器的左上角
// offsetX\offsetY坐标系原点是标签border以内的左上角
var e = ev || event;
// offsetLeft/offetTop:从html标签的左侧边框和顶部边框开始计算距离
// offsetWidth/offsetHeight包含了:边框、内边距、width/height
// console.log(div.offsetWidth);
console.log(ev);
}
}
鼠标拖拽相关事件

        

        
    
    

        

你可能感兴趣的:(JS)