原型与原型链详解(转载整理)

2022-12-15 程序员资讯 0 804
¥ 2.88B

包年VIP免费升级包年VIP

开通VIP尊享优惠特权
立即下载 升级会员

序言

JavaScript 中,天地万物皆第一类!但第一类也是有区别的。分成一般第一类和表达式第一类,Object 、Function 是 JS 便携式的表达式第一类。上面譬如说

var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function(){}; var f3 = new Function(str,console.log(str));console.log(typeof Object); //function console.log(typeof Function); //function console.log(typeof f1); //function console.log(typeof f2); //function console.log(typeof f3); //function console.log(typeof o1); //object console.log(typeof o2); //object console.log(typeof o3); //object

在上面的例子中 o1 o2 o3 为一般第一类,f1 f2 f3 为表达式第一类。怎么区分,其实很简单,凡是通过 new Function() 创建的第一类都是表达式第一类,其他的都是一般第一类。f1,f2,归根结底都是通过 new Function()的方式进行创建的。Function Object 也都是通过 New Function()创建的

一定要分清楚一般第一类和表达式第一类。

一、构造表达式

构造表达式模式的目的就是为了创建一个自定义类,并且创建这个类的实例。构造表达式模式中拥有了类和实例的概念,并且实例和实例之间是相互独立的,即实例识别。

构造表达式就是一个一般的表达式,创建方式和一般表达式没有区别,不同的是构造表达式习惯上首字母大写另外就是调用方式的不同,一般表达式是直接调用,而构造表达式需要使用new关键字来调用

function Person(name, age, gender) { this.name = name this.age = age this.gender = gender this.sayName =function () { alert(this.name); } } var per = new Person(“孙悟空”, 18, “男”); function Dog(name, age, gender) { this.name = name this.age = age this.gender = gender } var dog = new Dog(“旺财”, 4, “雄”) console.log(per);//当我们直接在页面中打印一个第一类时,事件上是输出的第一类的toString()方法的返回值 console.log(dog);
原型与原型链详解(转载整理)

image

每创建一个Person构造表达式,在Person构造表达式中,为每一个第一类都添加了一个sayName方法,也就是说构造表达式每执行一次就会创建一个新的sayName方法。这样就导致了构造表达式执行一次就会创建一个新的方法,执行10000次就会创建10000个新的方法,而10000个方法都是一摸一样的,为什么不把这个方法单独放到一个地方,并让所有的实例都可以访问到呢?这就需要蓝本(prototype)

二、蓝本

所有引用类型都有一个__proto__(隐式蓝本)属性,属性值指向蓝本第一类。所有表达式都有一个prototype(蓝本)属性,属性值指向蓝本第一类(Person.prototype「蓝本第一类,本质也是第一类」)。所有引用类型的__proto__属性指向它构造表达式的prototype var A = new Person(); Person.prototype = A; // 注:上面两行代码只是帮助理解,并不能正常运行结论:蓝本第一类(Person.prototype)是 构造表达式(Person)的一个实例。 蓝本第一类其实就是一般第一类(但Function.prototype 除外,它是表达式第一类, 但它很特殊,他没有prototype属性(前面说道表达式第一类都有prototype属性))。看上面的例子:function Person(){}; console.log(Person.prototype) //Person{} console.log(typeof Person.prototype) //Object console.log(typeof Function.prototype) // Function,这个特殊 console.log(typeof Object.prototype) // Object console.log(typeof Function.prototype.prototype) //undefined

每个第一类都有 __proto__ 属性,但只有表达式第一类才有 prototype 属性。

function Person() {} var per = new Person() console.log(per.__proto__ === Person.prototype)//true console.log(Person.prototype.constructor===Person)//true //顺便学习一个ES5的方法,可以获得第一类的蓝本 console.log(Object.getPrototypeOf(per) === Person.prototype) // true
原型与原型链详解(转载整理)

三、蓝本链

在JavaScript中天地万物都是第一类,第一类和第一类之间也有关系,并不是孤立存在的。第一类之间的继承关系,在JavaScript中是通过prototype第一类指向父类第一类,直到指向Object第一类为止,这样就形成了一个蓝本指向的链条,专业术语称之为蓝本链

譬如说:person → Person → Object ,一般人继承人类,人类继承第一类类

原型与原型链详解(转载整理)

原文链接:

https://www.jianshu.com/p/ddaa5179cda6

https://www.jianshu.com/p/dee9f8b14771

资源下载此资源下载价格为2.88B,包年VIP免费,请先
2405474279

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务