面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式。它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。
每一个对象都是功能中心,具有明确分工,可以完成接受信息、处理数据、发出信息等任务。对象可以复用,通过继承机制还可以定制。——对象是一个容器,封装了属性(property)和方法(method)。
关键字:构造函数 | this | 继承
生成对象——构造函数
典型的面向对象编程语言(比如 C++ 和 Java),都有“类”(class)这个概念。所谓“类”就是对象的模板,对象就是“类”的实例。但是,JavaScript 语言的对象体系,不是基于“类”的,而是基于构造函数(constructor)和原型链(prototype)
构造函数的特点有两个:
1、函数体内部使用了this关键字,代表了所要生成的对象实例。
2、生成对象的时候,必须使用new命令。
function Person(name,age){
this.name=name
this.age=age
this.sayName=function(){
console.log(this.name)
}
}
var a=new Person('jack',18)
new命令的作用,就是执行构造函数,返回一个实例对象。原理步骤如下:
1.创建一个空对象,作为将要返回的对象实例。
2.将这个空对象的原型,指向构造函数的prototype属性(this.--proto-- =这个构造函数.prototype)。
3.将这个空对象赋值给函数内部的this关键字。
4.开始执行构造函数内部的代码。
5.返回新对象
如果构造函数内部有return语句,而且return后面跟着一个对象,new命令会返回return语句指定的对象;否则,就会不管return语句,返回this对象
var Vehicle = function () {
this.price = 1000;
return 1000;
};
(new Vehicle()) === 1000
// false
***********************************
var Vehicle = function (){
this.price = 1000;
return { price: 2000 };
};
(new Vehicle()).price
// 2000
返回一个对象——关键字this
this除了在构造函数中使用,还能在以下几个场景中使用
1.全局环境
全局环境使用this,它指的就是顶层对象window
this === window // true
function f() {
console.log(this === window);
}
f() // true
所以注意了:调用在全局环境中的函数时,如果没有用call指明this,则函数中的this指向window。
2.如果对象的方法里面包含this,this的指向就是方法运行时所在的对象。该方法赋值给另一个对象,就会改变this的指向。
var obj ={
foo: function () {
console.log(this);
}
};
obj.foo() // obj
3.箭头函数中的this:箭头函数其实是没有 this 的,他里面的this 只取决于他外面的第一个不是 箭头函数的函数的 this
function a() {
return () => {
return () => {
console.log(this)
}
}
}
console.log(a()()()) //window
以下几种情况会改变this指向
// 情况一
(obj.foo = obj.foo)() // window
// 情况二
(false || obj.foo)() // window
// 情况三
(1, obj.foo)() // window
原因:上面代码中,obj.foo就是一个值。这个值真正调用的时候,运行环境已经不是obj了,而是全局环境,所以this不再指向obj。
可以这样理解,JavaScript 引擎内部,obj和obj.foo储存在两个内存地址,称为地址一和地址二。obj.foo()这样调用时,是从地址一调用地址二,因此地址二的运行环境是地址一,this指向obj。但是,上面三种情况,都是直接取出地址二进行调用,这样的话,运行环境就是全局环境,因此this指向全局环境。上面三种情况等同于下面的代码。
注意:避免多层this,避免数组处理中的this,避免回调函数中的this;
改变this的指向,call,aplly,bind方法。https://www.jianshu.com/p/0f6b09992086
对象的继承——原型链
1.原型
由来:
通过构造函数为实例对象定义属性,虽然很方便,但是有一个缺点。同一个构造函数的多个实例之间,无法共享属性,从而造成对系统资源的浪费。
function Cat(name, color) {
this.name = name;
this.color = color;
this.meow = function () {
console.log('喵喵');
};
}
var cat1 = new Cat('大毛', '白色');
var cat2 = new Cat('二毛', '黑色');
cat1.meow === cat2.meow
// false
上面代码中,cat1和cat2是同一个构造函数的两个实例,它们都具有meow方法。由于meow方法是生成在每个实例对象上面,所以两个实例就生成了两次。也就是说,每新建一个实例,就会新建一个meow方法。这既没有必要,又浪费系统资源,因为所有meow方法都是同样的行为,完全应该共享。
所以:原型对象(prototype)来解决这个问题了
JavaScript 规定,每个函数都有一个prototype属性,指向一个对象。对于普通函数来说,该属性基本无用。但是,对于构造函数来说,生成实例的时候,该属性会自动成为实例对象的原型。
简单来说:protype属性只有一个功能:储存共有属性对象的地址
(每个函数都有 prototype 属性,该属性指向原型。 每个对象都有 _ proto _ 属性,指向了创建该对象的构造函数的原型。其实这个 属性指向了 [[prototype]],但是 [[prototype]] 是内部属性,我们并不能访问到, 所以使用 _ proto _ 来访问。 对象可以通过 _ proto _ 来寻找不属于该对象的属性,_ proto _ 将对象连接起 来组成了原型链。)
function Animal(name) {
this.name = name;
}
Animal.prototype.color = 'white';
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // 'white'
如果实例对象自身就有某个属性或方法,它就不会再去原型对象寻找这个属性或方法。
cat1.color = 'black';
cat1.color // 'black'
cat2.color // 'white'
Animal.prototype.color // 'white';
2.原型链
--proto--
var 对象=new 函数();(函数指Number,String,Boolean,Object)
对象.--proto--=函数.prototype(--proto--是对象属性,prototype是函数属性)
函数.prototype.--proto--=Object.prototype
函数.--proto--=Function.prototype
Function.--proto--=Function.prototype
Function.prototype.--proto--=Object.prototype
Object.prototype的原型是null。null没有任何属性和方法,也没有自己的原型。因此,原型链的尽头就是null
3.构造函数的继承
function Human(name){
this.name = name
}
Human.prototype.run = function(){
console.log("我叫"+this.name+",我在跑")
return undefined
}
function Man(name){
Human.call(this)//Man有了Human的属性
this.gender = '男'
}
var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()//Man有了Human的方法
//以上三步等价于Man.prototype.--proto--=Human.prototype,但是IE不支持
Man.prototype.fight = function(){
console.log('糊你熊脸')
}
var a =new Man(‘jack’)
a.name//'jack'
a.gender//'男'
a.run()//'我叫Jack,我在跑'
a先在自己身上找属性或者方法,没有就往自己实例上找,再没有就往自己实例的爸爸上找——继承
a.--proto--=Man.prototype
Man.prototype.--proto--=Human.prototype
Human.prototype.--proto=Object.prototype
Object.prototype.--proto=null
ES6写法
class Human{
constructor(name){
this.name = name
}
run(){//prototype
console.log("我叫"+this.name+",我在跑")
return undefined
}
}
class Man extends Human{//extends相当于Man.prototype.--proto--=Human.prototype
constructor(name){
super(name)//super相当于call
this.gender = '男'
}
fight(){
console.log('糊你熊脸')
}
}