1.概念
2.理解
定义一个对象
利用对象的属性存储的数据
将程序执行需要的数据都以属性的形式,存储在对象中
利用函数方法存储程序代码
将执行程序需要的代码
以函数方法的形式存储
调用执行函数方法时
使用的数据是对象属性中存储的数据
工厂模式
function 函数(形参,形参...){ const obj= {}; //创建一个空对象 obj.属性 = 属性; obj.属性 = 属性; ... 设定对象的属性和属性值 obj.函数方法 = function(){} obj.函数方法 = function(){} ... 设定对象的函数方法 return obj; 返回值是这个创建的对象 } /* 工厂模式 是 创建 属性和函数方法相同 属性值不同的 对象 创建的对象 都 相同的属性 不同的属性值 还有 完全相同的函数方法 每一个对象都存储了完全相同的函数方法 造成有 冗余的代码程序 */
function 构造函数(形参,形参...){ //在构造函数中通过this指向设定操作对象的属性 this.属性 = 形参; this.属性 = 形参; } //在构造函数外在构造函数的prototype中定义函数 构造函数.prototype.函数方法 = function(){} 构造函数.prototype.函数方法 = function(){} //通过new关键词 调用构造函数创建实例化对象
使用class关键词定义构造函数 class 构造函数{ //在构造函数中定义对象的属性属性值 constructor(形参,形参...){ this.属性 = 形参; this.属性 = 形参; } //在构造函数外定义函数方法 js程序自动定义在prototype 中 函数方法(){} 函数方法(){} } const 实例化对象 = new 构造函数(实参,实参...); 通过new关键词调用构造函数创建实例化对象
字面量方式
const obj = {} obj.a = 1 obj.b = 2 console.log(obj) const obj1 = {} obj1.a = 1 obj1.b = 2 console.log(obj1) //不能批量生产
内置构造函数
const obj = new Object() obj.a = 1 obj.b = 2 console.log(obj) const obj1 = new Object() obj1.a = 1 obj1.b = 2 console.log(obj1) //不能批量生产
工厂函数
function createObj (name, age) { // 1. 手动创建一个对象 const obj = {} // 2. 手动向对象内部添加属性 obj.name = name obj.age = age // 3. 手动返回一个对象 return obj } //这个方法能够创建对象, 并且批量生产也可以
自定义构造函数
function createObj () { // 1. 自动创建出来一个对象 // 2. 手动向对象添加属性 // 3. 自动返回一个对象 } const o1 = new createObj() // 这种调用方式, 才是 构造函数 const o2 = createObj() // 这就是一个普通函数的调用 console.log(o1) console.log(o2) /* 自定义构造函数, 本质是就是一个函数 当他和 new 关键字连用的时候, 就叫做构造函数 自动创建一个对象 手动向创建的对象添加属性 自动返回一个对象 */
1. 一定是和new关键字连用
如果没有和new连用,那么它就是一个普通函数
2.当一个函数和new关键连用的时候,这个函数就被称为自定义构造函数,这个函数内容this指向,指向返回出来的对象
3.构造函数不能使用给箭头函数
因为箭头函数内部没有this
4.构造函数内部不需要return
5.书写构造函数时,首字母建议大写
目的: 仅仅是为了和普通函数区分
6.我们构造函数通过new关键字创建出来的对象,叫做实例化对象,本质上还是一个对象,只不过名字上叫做实例化对象(实例对象)
我们把构造函数通过new关键字创建对象的过程叫实例化
和普通函数一样, 只不过 调用的时候要和 new 连用 不然就是一个普通函数调用
1.不写new的时候就是普通函数调用,没有创造对象的能力
function Person () {} var o1 = new Person() // 一个对象 var o2 = Person() // 什么也得不到, 就是一个普通函数的调用
2.首字母不大些, 只要和 new 连用, 就有创造对象的能力
function person () {} var o1 = new person() // 一个对象
3.当调用的时候, 如果不需要传递参数可以不写 ()
, 但是建议写上
function person () {} var o1 = new person // 一个对象
5.构造函数内部的 this, 由于和 new 连用的关系, 是指向当前实例对象的
function Person () { console.log(this) } var o1 = new Person() // this ---> o1 var o2 = new Person() // this ---> o2
function Person() { this.name = 'Jack' this.age = 18 } var o1 = new Person() var o2 = new Person()
function Person() { this.name = 'Jack' this.age = 18 this.sayHi = function () { console.log('hello word') } } var o1 = new Person() var o2 = new Person()
// 有缺点 function Person() { this.name = 'Jack' this.age = 18 this.sayHi = function () { console.log('hello word') } } /** * 第一次 new 的时候, Person 这个函数要执行一遍 * 执行一边就会创造一个新的函数, 并且把函数地址赋值给 this.sayHi */ var o1 = new Person() /** * 第二次 new 的时候, Person 这个函数要执行一遍 * 执行一遍就会创造一个新的函数, 并且把函数地址赋值给 this.sayHi */ var o2 = new Person()
这样也是可以的, 但是有一点小缺点
sayHi
函数就是一个代码一模一样, 功能一模一样o1.sayHi
是一个地址, o2.sayHi
是一个地址console.log(o1.sayHi === o2.sayHi)
的到的结果是 false
prototype
对象空间可以由函数名来访问function Person () {} console.log(Person.prototype) // 是一个对象
function Person() {} Person.prototype.name = 'prototype' Person.prototype.sayHi = function () {}
每一个对象都天生自带一个成员, 叫做 __proto__
, 是一个对象空间
既然每一个对象都有, 实例化对象也是对象, 那么每一个实例化对象也有这个成员
这个 __proto__
对象空间是给每一个对象使用的
当你访问一个对象中的成员的时候
__proto__
这个对象空间里面找, 里面有的话就会有结果那么这个 __proto__
又指向哪里呢?
__proto__
就指向这个构造函数的 prototype
function Person() {} var p1 = new Person() console.log(p1.__proto__ === Person.prototype) // true
实例化对象的 __proto__
和所属构造函数的 prototype
是一个对象空间
我们可以通过构造函数名称来向 prototype
中添加成员
对象在访问的时候自己没有, 可以自动去自己的 __proto__
中查找
那么, 我们之前构造函数的缺点就可以解决了
prototype
中__proto__
中找function Person() {} Person.prototype.sayHi = function () { console.log('hello Person') } var p1 = new Person() p1.sayHi()
p1
自己没有 sayHi
方法,就会去自己的 __proto__
中查找p1.__proto__
就是 Person.prototype
Person.prototype
中添加了 sayHi
方法p1.sayHi
就可以执行了prototype
中查找function Person() {} Person.prototype.sayHi = function () { console.log('hello') } var p1 = new Person() var p2 = new Person() console.log(p1.sayHi === p2.sayHi)
p1
是 Person
的一个实例p2
是 Person
的一个实例p1.__proto__
和 p2.__proto__
指向的都是 Person.prototype
p1
去调用 sayHi
方法的时候是去 Person.prototype
中找p2
去调用 sayHi
方法的时候是去 Person.prototype
中找结论
prototype
是一个对象, 每一个对象又自带 __proto__
属性每一个对象都有一个自己所属的构造函数
比如: 数组
// 数组本身也是一个对象 var arr = [] var arr1 = new Array()
Array
比如: 函数
// 函数本身也是一个对象 var fn = function () {} var fun = new Function()
Function
__proto__
里面也有一个成员叫做 constructorObject
的实例化对象Object.prototype
也是个对象, 那么它的 __proto__
又指向谁呢?Object
的 js 中的顶级构造函数, 我们有一句话叫 万物皆对象Object.prototype
就到顶了, Object.prototype 的 __proto__
就是 null__proto__
中找__proto__
里没有就再去 __proto__
里面找Object.prototype
里面都没有, 那么就会返回 undefined
到这里, 我们就会觉得, 如果是赋值的话, 那么也会按照原型链的规则来
但是: 并不是! 并不是! 并不是! 重要的事情说三遍
赋值的时候就是直接给对象本身赋值
__proto__
有关系到了这里, 我们就发现了面向对象的思想模式