JavaScript面向对象0710

JavaScript面向对象

关于对象的基本概念就不多写,已经学了无数次

1.创建默认对象

  • 先创建对象,在添加属性和行为,有两种方式

    • // 创建对象的第一种方式
 let obj = new Object();
 obj.name = "tan";
 obj.age = 20;
 obj.say = function () {
     console.log("hello world");
 }
 console.log(obj.name);
 console.log(obj.age);
 obj.say();


    • // 创建对象的第二种方式
let obj = {}; // let obj = new Object();
 obj.name = "tan";
 obj.age = 20;
 obj.say = function () {
     console.log("hello world");
 }
 console.log(obj.name);
 console.log(obj.age);
 obj.say();

  • 创建对象时添加属性和行为

    • // 创建对象的第三种方式
// 注意点: 属性名称和取值之间用冒号隔开, 属性和属性之间用逗号隔开
let obj = {
    name: "tan",
    age: 20,
    say: function () {
        console.log("hello world");
    }
};
console.log(obj.name);
console.log(obj.age);
obj.say();

2.方法和函数的区别

  • 函数就是没有和其它的类显示的绑定在一起的, 我们就称之为函数
  • 方法就是显示的和其它的类绑定在一起的, 我们就称之为方法
    • 无论是函数还是方法, 内部都有一个叫做this的东西,this是什么? 谁调用了当前的函数或者方法, 那么当前的this就是谁,函数内部的this输出的是window, 方法内部的this输出的是当前调用的那个对象.

3.工厂函数(不专业)

  • 工厂函数就是专门用于创建对象的函数, 我们就称之为工厂函数,可以减少代码冗余

  • function createPerson(myName, myAge) {
  let obj = new Object();
  obj.name = myName;
  obj.age = myAge;
  obj.say = function () {
      console.log("hello world");
  }
  return obj;
}
let obj1 = createPerson("tan", 20);
let obj2 = createPerson("zs", 25);
console.log(obj1);
console.log(obj2);

4.构造函数(注意当new一个对象时内部做了什么)

  • 4.1 构造函数和工厂函数一样, 都是专门用于创建对象的

    • 构造函数和工厂函数的区别

      • 构造函数的函数名称首字母必须大写

      • 构造函数只能够通过new来调用

      • function Person(myName, myAge) {
       // let obj = new Object();  // 系统自动添加的
       // let this = obj; // 系统自动添加的
       this.name = myName;
       this.age = myAge;
       this.say = function () {
           console.log("hello world");
       }
       // return this; // 系统自动添加的
}
let obj1 = new Person("tan", 20);
let obj2 = new Person("zs", 44);
console.log(obj1);
console.log(obj2);
 /*
 1.当我们new Person("tan", 20);系统做了什么事情
 1.1会在构造函数中自动创建一个对象
 1.2会自动将刚才创建的对象赋值给this
 1.3会在构造函数的最后自动添加return this;
 */
    4.2 构造函数里需要注意的一些性能问题
    • function Person(myName, myAge) {
    // let obj = new Object();  // 系统自动添加的
    // let this = obj; // 系统自动添加的
    this.name = myName;
    this.age = myAge;
    this.say = function () {
        console.log("hello world");
    }
    // return this; // 系统自动添加的
}
let obj1 = new Person("lnj", 34);
let obj2 = new Person("zs", 44);
// 由于两个对象中的say方法的实现都是一样的, 但是保存到了不同的存储空间中
// 所以有性能问题
console.log(obj1.say === obj2.say); // false  地址不一样

    • 怎样解决上边的问题呢,看一下优化的演变过程

      • 构造函数优化1

      • function mySay() {
    console.log("hello world");
}
function Person(myName, myAge) {
    // let obj = new Object();  // 系统自动添加的
    // let this = obj; // 系统自动添加的
    this.name = myName;
    this.age = myAge;
    this.say = mySay;
    // return this; // 系统自动添加的
}
 /*
 1.当前这种方式解决之后存在的弊端
 1.1阅读性降低了
 1.2污染了全局的命名空间
 */

      • 构造函数优化2

      • let fns = {
    mySay: function () {
        console.log("hello world");
    }
 }
 function Person(myName, myAge) {
     // let obj = new Object();  // 系统自动添加的
     // let this = obj; // 系统自动添加的
     this.name = myName;
     this.age = myAge;
     this.say = fns.mySay;
     // return this; // 系统自动添加的
 }
 let obj1 = new Person("lnj", 34);
 let obj2 = new Person("zs", 44);
 console.log(obj1.say === obj2.say); // true

      • 构造函数优化终极(专业写法)

      • function Person(myName, myAge) {
    // let obj = new Object();  // 系统自动添加的
    // let this = obj; // 系统自动添加的
    this.name = myName;
    this.age = myAge;
    // this.say = fns.mySay;
    // return this; // 系统自动添加的
}
//每个"构造函数"中都有一个默认的属性, 叫做prototype, prototype属性保存着一个对象,可以在里面定义方法,然后创建的方法可以在创建对象时使用,如下
Person.prototype = {
    say: function () {
        console.log("hello world");
    }
}
let obj1 = new Person("lnj", 34);
obj1.say();
let obj2 = new Person("zs", 44);
obj2.say();
console.log(obj1.say === obj2.say); // true
4.3 prototype特点
  • 存储在prototype中的方法可以被对应构造函数创建出来的所有对象共享
  • prototype中除了可以存储方法以外, 还可以存储属性
  • prototype如果出现了和构造函数中同名的属性或者方法, 对象在访问的时候, 访问到的是构造函中的数据
4.4 prototype应用场景
  • prototype中一般情况下用于存储所有对象都相同的一些属性以及方法
  • 如果是对象特有的属性或者方法, 我们会存储到构造函数中

5.对象三角恋关系(好好好好的理解)

  • /*
 1.每个"构造函数"中都有一个默认的属性, 叫做prototype
   prototype属性保存着一个对象, 这个对象我们称之为"原型对象"
 2.每个"原型对象"中都有一个默认的属性, 叫做constructor
   constructor指向当前原型对象对应的那个"构造函数"
 3.通过构造函数创建出来的对象我们称之为"实例对象"
   每个"实例对象"中都有一个默认的属性, 叫做__proto__
   __proto__指向创建它的那个构造函数的"原型对象"
 */
  function Person(myName, myAge) {
      this.name = myName;
      this.age = myAge;
  }
  let obj1 = new Person("lnj", 34);

  console.log(Person.prototype);
  console.log(Person.prototype.constructor);
  console.log(obj1.__proto__);
5.1Function函数
  • /*
1.JavaScript中函数是引用类型(对象类型), 既然是对象,
  所以也是通过构造函数创建出来的,"所有函数"都是通过Function构造函数创建出来的对象
2.JavaScript中只要是"函数"就有prototype属性
 "Function函数"的prototype属性指向"Function原型对象"
3.JavaScript中只要"原型对象"就有constructor属性
  "Function原型对象"的constructor指向它对应的构造函数
4.Person构造函数是Function构造函数的实例对象, 所以也有__proto__属性
  Person构造函数的__proto__属性指向"Function原型对象"
*/

function Person(myName, myAge) {
    this.name = myName;
    this.age = myAge;
}
let obj1 = new Person("lnj", 34);

// console.log(Function);
// console.log(Function.prototype);
// console.log(Function.prototype.constructor);
// console.log(Function === Function.prototype.constructor); // true

// console.log(Person.__proto__);
console.log(Person.__proto__ === Function.prototype); // true

  • 通过上面的代码,我们可以得到以下的关系图

三角恋1.png

Function也是一个函数,那么他也是一个对象,他也有proto属性,但是与其他的有点不同,他的proto属性是指向Function原型对象的.那么就有下面的关系

三角恋2.png
5.2 object函数

JavaScript中还有一个系统提供的构造函数叫做Object,只要是函数都是"Function构造函数"的实例对象,而通过object构造函数又能创建实例对象,所以有以下关系

三角恋3.png

代码验证如下

  • console.log(Function.__proto__); console.log(Function.__proto__ === Function.prototype); // true

console.log(Object);
console.log(Object.__proto__);
console.log(Object.__proto__ === Function.prototype); // true
console.log(Object.prototype);
console.log(Object.prototype.constructor);
console.log(Object.prototype.constructor === Object); // true
console.log(Object.prototype.__proto__); // null
我们得到最终的关系图
最终关系图.png

6.原型链

在了解了上面的对象三角恋之后,再回来看一下以前优化的代码,

  •  Person.prototype = {
// 注意点: 为了不破坏原有的关系, 在给prototype赋值的时候, 需要在自定义的对象中手动的添加constructor属性, 手动的指定需要指向谁
            constructor: Person,//这样一来就没有破坏原来的关系了
            currentType: "人",
            say: function () {
                console.log("hello world");
            }
 }
let obj1 = new Person("lnj", 34);

  • 我们再来看一下对象在查找属性和方法的时候怎么做, 会先在当前对象查找,如果当前对象中找不到想要的, 会依次去上一级原型对象中查找,如果找到Object原型对象都没有找到, 就会报错,如下图


    原型链.png

7.属性注意点

分析一下以下代码

  • function Person(myName, myAge) {
    this.name = myName;
    this.age = myAge;
 }
 Person.prototype = {
     constructor: Person,
     currentType: "人",
     say: function () {
         console.log("hello world");
     }
 }
 let obj = new Person("lnj", 34);
 // 注意点: 在给一个对象不存在的属性设置值的时候, 不会去原型对象中查找, 如果当前对象没有就会给当前对象新增一个不存在的属性
 obj.currentType = "新设置的值";
 console.log(obj.currentType); // 新设置的值
 console.log(obj.__proto__.currentType); // "人"
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,332评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,508评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,812评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,607评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,728评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,919评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,071评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,802评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,256评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,389评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,032评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2赞 350

推荐阅读更多精彩内容

  • 72-ES6类和对象
    1. 在ES6之前如何定义一个类?通过构造函数来定义一个类 function Person(myName, ...
    仰望_IT阅读 201评论 0赞 1
  • ECMAScript6简解
    ECMAScript简称就是ES,你可以把它看成是一套标准,JavaScript就是实施了这套标准的一门语言 现在...
    最美时光A阅读 307评论 0赞 0
  • javacript高级程序设计学习笔记
    布尔操作符!false //true!"blue" //false!0 //true!NaN //true!...
    左钱钱阅读 391评论 0赞 0
  • 55-构造函数
    什么是构造函数构造函数和工厂函数一样, 都时专门用于创建对象的构造函数本质上是工厂函数的简写 构造函数和工厂函数的...
    仰望_IT阅读 185评论 0赞 0
  • 仅此一副对联，便写尽了人生
    今天读到一副对联，可谓功力深厚，堪称神联： 上联：若不撇开终是苦 下联：各自捺住即成名 横批：撇捺人生 不得不说，...
    大道有行阅读 13,707评论 2赞 1