面向:终极目标:为了分工合作
面向过程:重视一件事情的整个过程
面向对象:重视一件事的参与对象
定义对象
var obj = {} // 字面量方式
var pbj = new Object() // 构造函数方式
两者一样
工厂函数
使用函数方式解决同类型对象的重复定义
function fn(name, age) { // 工厂函数:批量生产对象的 var obj = { name: name, age: age } return obj } var a = fn('张三', 12) console.log(a); var b = fn('李四', 13) console.log(b); var c = fn('阿黄', 2) console.log(c);
缺点:所有数据一模一样,无法从数据中 区分逻辑层面的类型 - 哪个是人,哪个是狗
构造函数 new
构造函数,new出来的数据,可以一目了然看到具体是什么逻辑上的数据类型
使用构造函数来解决工厂函数的缺点
var p = new Object()
var d = new Object()
console.log(p, d);
需要使用自己定义的函数做构造函数来解决问题
function Person() {
}
var p = new Person()
function Dog() {
}
var d = new Dog()
p.name = '张三'
p.age = 12
d.name = '阿黄'
d.age = 2
console.log(p, d);
构造函数>工厂函数
构造函数:
有系统提供的:Object Array RegExp Date Number String ....,只要是new 跟的函数就可以叫做构造函数 - 自己定义的构造函数 - 给new出来的对象,添加属性
function fn() { this.键 = 值 }
function Person() { // 1.var obj = {} // 2.this = obj // 3.执行构造函数中的代码 // 构造函数中的this:new出来的那个对象 this.name = '张三' // 给this对象添加属性 console.log(111, this); // this就是new出来的那个对象 console.log(this.name); // 4.return obj } var p = new Person() // 虽然在new,但是函数也是在调用 // 新的函数调用方式,通过new来调用 console.log(p); var o = new Person() console.log(o);
总结:
1.new 构造函数 其实也是在调用函数
2.构造函数中的this代表new出来的对象
3.new到底干了什么?
1.隐形创建了一个空对象
2.将空对象赋值给this
3.执行构造函数中的代码
4.返回这个空对象
构造函数传参
定义对象的方式:使用自定义构造函数
添加属性:通过new的时候调用函数传参
function Person(name, age, eat) { this.name = name this.age = age this.eat = eat } var p1 = new Person('张三', 12, function() { console.log(this.name + '在吃饭') }) // 箭头函数中的this,在定义的时候就已经知道代表什么了 var p2 = new Person('李四', 13, function() { console.log(this.name + '在吃饭') }) // console.log(p1, p2); console.log( p1.eat === p2.eat ); // false
console.log( p1.eat === p2.eat ); // false
两个一模一样的函数,没有必要占用两个内存空间了
定义在全局中的变量容易被覆盖
如何将函数定义在局部,还能保持两个对象共用一个函数?
节省内存 -------------- 下篇原型