JavaScript-原型链的演变(第八天)

简介: JavaScript-原型链的演变(第八天)

JavaScript-函数和方法区别

1.什么是函数?

函数就是没有和其它的类显示的绑定在一起的, 我们就称之为函数

2.什么是方法?

方法就是显示的和其它的类绑定在一起的, 我们就称之为方法

3.函数和方法的区别
  • 3.1函数可以直接调用, 但是方法不能直接调用, 只能通过对象来调用
  • 3.2函数内部的this输出的是window, 方法内部的this输出的是当前调用的那个对象

4.【补充】:无论是函数还是方法, 内部都有一个叫做this的东东

this是什么? 谁调用了当前的函数或者方法, 那么当前的this就是谁

1.什么是工厂函数?

工厂函数就是专门用于创建对象的函数, 我们就称之为工厂函数

1.什么是构造函数

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

构造函数本质上是工厂函数的简写

2.构造函数和工厂函数的区别

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

2.2构造函数只能够通过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; // 系统自动添加的
        }

1.当我们new Person("shanjialan", 19);系统做了什么事情

1.1会在构造函数中自动创建一个对象

1.2会自动将刚才创建的对象赋值给this

1.3会在构造函数的最后自动添加return this;

【问题】:由于两个对象中的say方法的实现都是一样的, 但是保存到了不同的存储空间中,所以有性能问题,通过三个等号来判断两个函数名称, 表示判断两个函数是否都存储在同一块内存中

console.log(obj1.say === obj2.say); // false

构造函数优化【上】

为了解决上面相同的方法却存储在不同的存储空间里导致性能不好的问题,我们的优化是在构造方法外定义一个函数,让构造函数中的方法指向该函数,这时不同的对象的方法指向的是同一块存储空间

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.2污染了全局的命名空间

构造函数优化【中】

为了不污染全局的命名空间,我们将函数放在一个对象中保存起来,访问通过对象名.方法的方式来访问,这样就有效地解决了存储空间和命名空间污染的问题

// 由于test函数都是属于同一个对象, 所以返回true
        let fns = {
            mySay: function () {
                console.log("hello world");
            }
        }
        function Person(myName, myAge) {
            this.name = myName;
            this.age = myAge;
            this.say = fns.mySay;
        }
        let obj1 = new Person("shanjialan", 19);
        let obj2 = new Person("zs", 44);
        console.log(obj1.say === obj2.say); // true
构造函数优化【下】

其实构造函数优化中的方式并不是特别专业,其实在JavaScript当中提供了一种专业的写法——prototype来存储公共的方法和属性,这样既解决了性能问题,有解决了命名空间污染的问题。

function Person(myName, myAge) {
            this.name = myName;
            this.age = myAge;
}
Person.prototype={
          function say(){alert("Hello");
}
 let obj1 = new Person("shanjialan", 19);
        let obj2 = new Person("zs", 44);
        console.log(obj1.say === obj2.say); // true

prototype总结

1. prototype特点

1.1 存储在prototype中的方法可以被对应构造函数创建出来的所有对象共享

1.2 prototype中除了可以存储方法以外, 还可以存储属性

1.3 prototype如果出现了和构造函数中同名的属性或者方法, 对象在访问的时候, 访问到的是构造函中的数据

2.prototype应用场景

prototype中一般情况下用于存储所有对象都相同的一些属性以及方法, 如果是对象特有的属性或者方法, 我们会存储到构造函数中

对象三角恋(原型链)

  • 每个构造函数都有一个属性prototypeprototype保存的对象叫做“原型对象”;
  • 每个原型对象中都有一个属性constructor,constructor保存的对象叫做“构造函数”
  • 通过构造函数构造的对象叫做实例对象,实例对象也有一个属性__proto指向构造它的构造函数的原型对象prototype

43.png

对象三角恋.png

Function构造函数

  • 1.JavaScript中函数是引用类型(对象类型), 既然是对象,
    所以也是通过构造函数创建出来的,"所有函数"都是通过Function构造函数创建出来的对象
  • 2.JavaScript中只要是"函数"就有prototype属性
    "Function函数"的prototype属性指向"Function原型对象"
  • 3.JavaScript中只要"原型对象"就有constructor属性
    "Function原型对象"的constructor指向它对应的构造函数
  • 4.Person构造函数是Function构造函数的实例对象, 所以也有proto属性,Person构造函数的proto属性指向"Function原型对象"
    42.png
    加入Function构造函数的三角链.png

Object构造函数

  1. JavaScript函数是引用类型(对象类型), 所以Function函数也是对象
  • 2."Function构造函数"也是一个对象, 所以也有proto属性
    "Function构造函数"proto属性指向"Function原型对象"*
  1. JavaScript中还有一个系统提供的构造函数叫做Object,只要是函数都是"Function构造函数"的实例对象
  • 4.只要是对象就有proto属性, 所以"Object构造函数"也有proto属性, "Object构造函数"的proto属性指向创建它那个构造函数的"原型对象"
  • 5.只要是构造函数都有一个默认的属性, 叫做prototype,prototype属性保存着一个对象, 这个对象我们称之为"原型对象"
  • 6.只要是原型对象都有一个默认的属性, 叫做constructor, constructor指向当前原型对象对应的那个"构造函数"

    42.png
    加入Function和Object构造函数的三角链.png

总结

  • 1.所有的构造函数都有一个prototype属性, 所有prototype属性都指向自己的原型对象
  • 2,所有的原型对象都有一个constructor属性, 所有constructor属性都指向自己的构造函数
  • 3.所有函数都是Function构造函数的实例对象
  • 4.所有函数都是对象, 包括Function构造函数
  • 5.所有对象都有proto属性
  • 6.普通对象的proto属性指向创建它的那个构造函数对应的"原型对象"
  • 7.所有对象的proto属性最终都会指向"Object原型对象"
  • 8."Object原型对象"的proto属性指向NULL
    【总结】
    所有对象都有一个proto属性;
    Function对象是所有函数的祖先函数;
    每个构造函数都有一个prototype属性,指向该函数的“原型对象”
    每个构造函数的原型对象都有一个constructor属性,指向其构造函数;
    所有函数都是对象;

注意点

使用优化【下】的方法,即使用构造函数名.prototype,会破坏原型链的关系,因为这相当于重新指定了构造函数的prototype覆盖掉,会导致之前的原型链关系被破坏,因此使用prototype属性时一定要指定constructor来确保原型链的一致性

原型链是指通过__ proto __ 属性来串起来的链,当访问一个属性或者方法时,自己有的用自己的,自己没有的从原型链上去找,原型链上有用原型链上的,原型链没有则报错

【注意点】:

操作的是私有属性(局部变量)

注意点:

在给一个对象不存在的属性设置值的时候, 不会去原型对象中查找, 如果当前对象没有就会给当前对象新增一个不存在的属性

由于私有属性的本质就是一个局部变量, 并不是真正的属性, 所以如果通过 对象.xxx的方式是找不到私有属性的, 所以会给当前对象新增一个不存在的属性

终结版

40.png

终结版.png

function Person(myName, myAge) {
    this.name = myName;
    this.age = myAge;
}
Person.prototype = {
    say: function() {
        console.log("小单,加油!!每天都是美好的一天,小豌豆,别放弃~!");
    }
}
let yiya = new Person("shanjialan", 19);
console.log(yiya.__proto__ === Person.prototype);
console.log(Person.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Person.prototype.__proto__);
console.log(Function.__proto__ === Function.prototype);
console.log(Object.__proto__ === Function.prototype);
console.log(Object.prototype.__proto__ === null);
console.log(Object.prototype.constructor === Object);
console.log(Function.prototype.__proto__ === Person.prototype.__proto__);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Person.prototype.__proto__ === Object.prototype);
console.log(Function.prototype.__proto__);
console.log(Person.prototype.__proto__);

39.png


目录
相关文章
|
6月前
|
JavaScript 前端开发 安全
JavaScript原型链的使用
【4月更文挑战第22天】JavaScript中的原型链是理解继承的关键,它允许对象复用属性和方法,减少代码冗余。示例展示如何通过原型链实现继承、扩展内置对象、构造函数与原型链的关系以及查找机制。应注意避免修改`Object.prototype`,使用安全方式设置原型链,并谨慎处理构造函数和副作用。
|
25天前
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
2天前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
12天前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
21 1
|
20天前
|
JavaScript 前端开发 开发者
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
19 0
|
20天前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
24 0
|
20天前
|
JavaScript 前端开发 安全
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
26 0
|
3月前
|
开发者 图形学 iOS开发
掌握Unity的跨平台部署与发布秘籍,让你的游戏作品在多个平台上大放异彩——从基础设置到高级优化,深入解析一站式游戏开发解决方案的每一个细节,带你领略高效发布流程的魅力所在
【8月更文挑战第31天】跨平台游戏开发是当今游戏产业的热点,尤其在移动设备普及的背景下更为重要。作为领先的游戏开发引擎,Unity以其卓越的跨平台支持能力脱颖而出,能够将游戏轻松部署至iOS、Android、PC、Mac、Web及游戏主机等多个平台。本文通过杂文形式探讨Unity在各平台的部署与发布策略,并提供具体实例,涵盖项目设置、性能优化、打包流程及发布前准备等关键环节,助力开发者充分利用Unity的强大功能,实现多平台游戏开发。
94 0
|
3月前
|
JavaScript 前端开发 开发者
揭开JavaScript的神秘面纱:原型链背后隐藏的继承秘密
【8月更文挑战第23天】原型链是JavaScript面向对象编程的核心特性,它使对象能继承另一个对象的属性和方法。每个对象内部都有一个[[Prototype]]属性指向其原型对象,形成链式结构。访问对象属性时,若当前对象不存在该属性,则沿原型链向上查找。
31 0
|
5月前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
121 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略