面向对象编程.jpg

1. 什么是面向对象

(1) 面向对象思想中, 有两个主要的概念:
类: 有相同的特征和行为的事物的抽象
对象: 类的一个实例
举个例子: 你们的媳妇,就是类;我的媳妇,就是对象......✌

(2) js不是一个严格的面向对象语言
说javascript是一种基于对象的语言应该更正确些,但说javascript不面向对象，在我看来则是错误的认知。只是javascript的面向对象与传统的class-basedOO(基于类的面向对象)相比, javascript有它与众不同的地方，其实主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能, 而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。 这种独特性称它为prototype-basedOO(基于原型的面向对象).

2. 在js中判断一个变量是否是一个对象的方法

(1) typeof

console.log(typeof 12);
console.log(typeof "打发");
console.log(typeof true);
                
var fn = function () {};
console.log(typeof fn);
                
var Arr = ["1", "2", "是打发"];
console.log(typeof Arr);// object 对象 引用类型

打印结果.png

(2) instanceof(判断是不是对象)

var fn = function () {};
var Arr = ["1", "2", "是打发"];
console.log(Arr instanceof Object);
console.log(fn instanceof Object);
console.log(true instanceof Object);
                
console.log(Arr instanceof Array);
                
注: 'aa' , 123 直接写是基本类型, 不是引用类型
var str = new String('aa');
console.log(str instanceof String);
console.log('aa' instanceof String);

打印结果.png

2. 如何自己创建一个对象

(1) 直接创建

结构: 
var 变量名 = {
     属性名1 : 值,
     属性名2 : 值,
     函数名 : function () {
         函数内容...
     }
}
var stu = {
    name : "笨蛋",
    age : 18,
    sex : "男",
    sayHi : function () {
        console.log(this.name);
    }
}
console.log(stu.name);
stu.sayHi();
对象调用自己的函数
var cf = {
    name : "Barrett-毁灭",
    age : 2,
    money : "$148",
    buibui : function () {
        console.log(this.money);
        }
}
cf.buibui();

打印结果.png

(2) 对象的构造函数

如果要批量创建对象第一种形式会很繁琐, 为了解决这个问题,使用构造函数

结构
 function 构造函数名(参数1, 参数2){
    this.属性名1 = 参数1;
    this.属性名2 = 参数2;
    this.函数名1 = function(){
         函数内容....   
    }
}
        
        
function student(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function() {
        console.log('我叫' + this.name)
    }
}   
注: 使用构造函数创建对象
var stu1 = new student('笨蛋', 18);
console.log(stu1.name);
注: 对象调用自己的函数(行为)
stu1.sayHi();

打印结果.png

(3) 原型(prototype)

每一个构造函数都有一个原型属性;
举个列子: "照猫画虎”，这里的猫就是原型，而虎就是类型，用JavaScript的prototype来表示就是: “虎.prototype = 某个猫” 或者 “虎.prototype=new 猫()”;
写个代码:

function student(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function() {
        alert('我叫' + this.name)
    }
}
var stu1 = new student('笨蛋', 18);
student.prototype.school = '清华';
student.prototype.saySchool = function () {
    console.log('我的母校是' + this.school);
}
console.log(stu1.school);
stu1.saySchool();
        
var stuBeida = new student("傻妞", 19);
stuBeida.school = '北大';
console.log(stuBeida.school);
console.log(stu1.school);

打印结果.png

既然每一个构造函数都有一个原型属性, 那系统的也就可以有, 比如可以给数组原型添加一个函数,如下:

给数组原型添加sum的一个函数
var arr = [1, 3, 5, 8];
Array.prototype.sum = function () {
    var temp = 0;
    for (var i = 0; i < this.length; i++) {
        temp += this[i];
    }
    return temp;
};
console.log(arr.sum());
打印结果为17

说一下原型链的问题,就是当要获取对象的某个属性的值的时候:

1. 判断当前这个对象是否存在这个属性,如果有就输出
2. 如果第一步没有获取到, 就去构造函数的原型中找
3. 如果1和2都没获取到, 去Object构造函数的原型中找
4. 如果123都没找到, 就输出undefined

另外, 画布canvas的使用经常会用到面向对象, cancas是H5中一个非常神奇的东西, 以后我再介绍吧