面向对象编程.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都没获取到, 去
Object构造函数的原型中找 - 如果123都没找到, 就输出
undefined
另外, 画布canvas的使用经常会用到面向对象, cancas是H5中一个非常神奇的东西, 以后我再介绍吧
