面向对象

面向对象编程(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('糊你熊脸')
     }
 }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容

  •   面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意...
    霜天晓阅读 2,105评论 0 6
  • 面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。ECMAScr...
    DHFE阅读 967评论 0 4
  • JavaScript面向对象程序设计 本文会碰到的知识点:原型、原型链、函数对象、普通对象、继承 读完本文,可以学...
    moyi_gg阅读 761评论 0 2
  • 姓名:李丹丹 公司:山东万洁环保科技有限公司 组别:第373期 利他一组 【日精进打卡第70天】 【知~学习】 《...
    小雨淅淅373阅读 137评论 0 0
  • 首先说一下博客吧,这个对我的启发最深! 至从做测试以来,已发现博客确实很重要,但也仅限于笔记的作用,只是把自己学习...
    蓝山_阑珊阅读 351评论 0 3