js原型和构造函数(代码片段)

keliguicang keliguicang     2022-12-17     554

关键词:

前言

  从应用层面深入理解原型模式和js中的构造函数。

构造函数(constructor)

  js中的任何对象都有自己的构造函数。js中使用字面量声明的普通对象()或数组([])等子对象本质上都是使用相关的函数做构造调用声明的。

// 等同于 var obj = ;
var obj = new Object();
// 等同于 arr = [];
var arr = new Array();

  获取对象的构造函数:constructor是可读的,在对象上进行普通的属性访问(. / [])即可。

// 这里我们可以看到字面量语法声明的对象本质还是使用Object()构造的。
var
obj = ; console.log(obj.constructor); // ƒ Object() [native code]

原型

  显式原型prototype属性

    prototype是函数的属性。每个函数被创建之后,都会拥有一个prototype属性,这个属性指向函数的原型对象。

function fn ()
console.log(fn.prototype); 

    fn.prototype的原型在chrome下的输出。是一个对象,这个对象有一个显式的属性constructor(构造函数),它指向的是构造这个对象的函数。 还有一个隐式的属性,__proto__。

技术图片

  隐式原型__proto__属性

    __proto__是对象的属性。每个对象被创建的时候都会拥有这个属性,这个属性指向的是,构造这个对象的函数的原型对象。

    访问对象的__proto__属性:IE10以前无法识别__proto__属性,其他浏览器大部分都可以识别,可以输出但无法访问内部信心。ES5提供的Object.getPtotypeOf(obj) 可以获取指定对象的__proto__属性。

function fn ()
var obj = new fn();
console.log(fn.prototype === Object.getPrototypeOf(obj)); // true

 

搞清楚prototype/__proto__/constructor之间的区别和联系

  1,所有对象都有自己的构造函数(constructor),和一个隐式的原型属性(__proto__),__proto__指向的是这个对象的构造函数的原型。

  2,所有的函数都有一个prototype属性这个熟悉指向的是构造函数的原型对象。

var obj = ;
// 这里的true不理解的话回头再看一遍之前的小例子,敲一下。理解这个true的话 原型这个部分的应用就没问题了。
console.log(obj.constructor.prototype === Object.getPrototypeOf(obj)); // true

原型链

  原型链就是一个对象作为另一个对象的原型而存,而这个作为别人原型的对象还有自己的原型。

  根对象

    js中的所有对象都拓展于Object.prototype。 它是js中的顶层对象。在它之上没有其他的原型了。

var obj= ;
var objConstructor = obj.constructor; 
// Object() 是使用js字面量创建的对象的构造函数。
console.log(objConstructor); // ƒ Object()  [native code] 
// Object.prototype是js中的根对象,在它之上没有其他原型了。
console.log(Object.getPrototypeOf(objConstructor.prototype)); // null

  原型链的形成
    关键就在于让一个对象成为另一个对象的原型。

    Object.create(obj):返回一个把指定参数作为原型的新对象。 

var obj= name:"obj";
var newObj = Object.create(obj);
console.log(newObj);

    从chrome下的输出我们可以看到 形成了一个三层的原型链 newObject 中的隐式原型属性__proto__指向了obj,obj是使用字面量创建的普通对象,它本质上是使用Object()创建的。所以它指向的是根对象Object.prototype。

    技术图片

原型模式的执行流程

  在对象本身查找要访问的属性和方法,如果没有,就到最近的原型上找,直接原型上没有,就到原型的原型上找,找到就直接返回,结束查找。一直找到Object.prototype上都没有,就返回undefined。

原型模式的应用

  主要有两种,面向对象写法和任务委托写法。面向对象就是使用原型继承,多态都用的很少,使用起来也比较难理解。任务委托是在《你不知道的js》一书中看到的写法,设计上来看比强行面向对象要直观。但现在时代变了,ES6提供了Class语法糖,让面向对象的js程序可读性较好,便于理解。所以只了解一下任务委托写法。

面向对象

  三大特征:封装,继承,多态。

  好处:结构清晰,易维护,易拓展。

基于原型继承的面向对象

  js中是没有传统面向类语言中的类和构造函数的,它使用new关键字配合普通函数模拟了构造函数,使用原型模拟类,让js拥有了继承和多态的能力。

  面向对象写法:定义普通函数做构造调用,在函数的原型上提供实例共享的属性和方法。

function Banner(info)
  this.ele = info.ele;
Banner.prototype =
  constructor:Banner,
  say:function()
  console.log("我是定义在Banner原型上的方法,由所有Banner构造出来的对象共享!");
  return this;
,
show:function()
  console.log(this.ele);
  return this;
  
new Banner(
ele:"box"
).say().show();

  任务委托:将数据和工具对象分开定义,让工具对象作为数据对象的原型。达到数据和逻辑分离,将任务处理委托给其他对象的目的。

var util = 
  say:function()
    console.log(this.name);
  

var data = Object.create(util);
data.name = "键盘";
data.say(); // 键盘

小结:

  1,每个对象都有自己的构造函数,可以通过constructor属性访问到。

  2,每个对象都有一个隐式原型属性__proto__,可以使用Object.getPrototypeOf(obj)访问。

  3,每个函数都有自己的原型对象,可以通过prototype属性访问。

  4,对象的隐式原型属性(__proto__)指向的就是它的构造函数的原型(prototype)。

  5,所有使用字面量创建的对象,本质上都是使用相关构造器函数构造出来的,函数是(Function()),数组是(Array())等等。

  6,js中的Object是顶层函数它的prototype之上没有其他的原型了。js中所有对象的原型链的顶层几乎都是Object.prototype。

  7,原型链就是对象做为其他对象的原型,的同时还有自己的原型。

  8,原型模式的执行顺序就是首先在对象自有属性中查找,找不到就问原型有没有,原型没有就问原型的原型有没有,直到找到返回或找到顶层原型后返回undefined。

  9,js中的面向对象就是基于原型模式在普通函数的原型上定义共享的属性和方法,达到继承的目的。

js原型和原型链(代码片段)

一步一步来;首先创建一个构造函数PersonfunctionPerson()varperson=newPerson();person.name='zhangsan';console.log(person.name)//zhangsan这里Person就是一个构造函数,然后new出了一个person实例对象;prototype 查看详情

es6基础2--构造函数和原型(代码片段)

构造函数和原型1.构造函数和原型1.1对象的三种创建方式1.2静态成员和实例成员1.2.2静态成员1.3构造函数的问题1.4构造函数原型prototype1.5对象原型1.6constructor构造函数1.7原型链1.8构造函数实例和原型对象三角关系1.9原型链和成员的... 查看详情

构造函数和原型——es5(代码片段)

?构造函数和原型?继承?ES5中的新增方法1.构造函数和原型1.1概述在ES6之前,JS中并没用引入类的概念。ES6,全称ECMAScript6.0,2015.06发版。但是目前浏览器的JavaScript是ES5版本,大多数高版本的浏览器也支持ES6,不过只实现了ES6的部... 查看详情

js原型对象(代码片段)

一,构造函数,原型对象,实例的关系:1,构造函数实例:封装的函数,如果通过new操作符来调用的,就是构造函数,如果没有通过new操作符来调用的,就是普通函数varperson1=newPerson(‘Mike‘,10);//此时的person1称为person的一个实... 查看详情

原型与继承与class(代码片段)

...属性(专业点叫静态属性)和方法(专业点叫静态方法)和原型属性和原型方法除了系统自带的那么几百万个对象,我们自己写在js的创建的对象,自定义的对象,都来自对象的构造函数,用来构造对象的函数,叫做构造函数,es6... 查看详情

js原型与原型链详细解释(代码片段)

文章目录一、JS原型链简要解释二、JS原型链详细解释1.构造函数2.原型对象3.`__proto__`4.原型链总结一、JS原型链简要解释原型是function对象上的一个属性,它表示构造函数构造出来的对象的共有祖先,被通过构造函数构造出来... 查看详情

js高级中的constructor构造函数(代码片段)

1.对象原型__proto__和构造函数原型对象prototype里面都有一个constructor属性2.constructor 称为构造函数 因为它的作用是用于new的实例对象指回构造函数本身3.constructor主要用于记录该对象是用于那个构造函数 它可以让原型对象prototype... 查看详情

构造函数,原型对象,实例对象(代码片段)

一、构造函数,原型对象,实例对象1.1基本概念1、对象:属性和方法的集合,即变量和函数的封装。调用构造函数产生的实例对象,每个对象都有一个__proto__属性,指向这个对象的构造函数的原型对象。2、构造器函数:用于创建... 查看详情

javascript学习笔记(代码片段)

Javascript学习笔记一、构造函数和原型1、概述2、构造函数1、利用构造函数创建对象2、静态成员和实例成员3、构造函数的问题4、构造函数原型prototype5、对象原型__proto__6、constructor构造函数7、构造函数、实例、原型对象三者之间... 查看详情

javascript构造函数和原型(代码片段)

目录1.构造函数和原型1.1概述1.2构造函数1.3构造函数的问题 1.4构造函数原型prototype1.5对象原型__proto__ 1.6constructor构造函数1.7构造函数、实例、原型对象三者之间的关系 1.8原型链1.9JavaScript的成员查找机制(规则)1.10原型对象this指... 查看详情

面向对象精要-构造函数和原型对象(代码片段)

1、构造函数functionPerson()构造函数-----首字母大写1.1、实例化对象functionPerson()varperson1=newPerson()1.2、检测对象类型instanceof 方法functionPerson()varperson1=newPerson();console.log(person1instanceofPerson);/*true* 查看详情

构造函数和原型(代码片段)

商品查询案例-利用数组新增方法操作数据<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,in 查看详情

什么是继承?——构造函数原型实例(代码片段)

...书!下面的内容是我今天看红宝书P238-250后总结的。1.原型链原型链的基本思想就是通过原型继承多个引用类型和方法。构造函数、原型和实例之间的关系:每个构造函数【SuperType】都有一个原型对象【prototype】,原... 查看详情

什么是继承?——构造函数原型实例(代码片段)

...书!下面的内容是我今天看红宝书P238-250后总结的。1.原型链原型链的基本思想就是通过原型继承多个引用类型和方法。构造函数、原型和实例之间的关系:每个构造函数【SuperType】都有一个原型对象【prototype】,原... 查看详情

读代码-构造函数和原型的重名属性(代码片段)

...)obj.a()//2先看属性有没有,如果属性上没有,会去原型上找Foo.a()//1考察原型和原型链分析把自己想象成JS引擎,你不是在读代码,而是在执行代码——定义的函数如果不执行,就不要去看它的内容执行输出`4... 查看详情

原型链和作用域链(代码片段)

一、原型链:1.原型对象:每一个构造函数都有一个prototype属性,这个属性就叫原型对象。每一个构造函数new出来的对象都有一个--proto--属性,这个属性指向原型对象。 <script>functionCar()//实例属性://this.produce=‘chevrolet... 查看详情

js中的原型链(代码片段)

什么是原型:原型指的就是原型对象,至于是谁的原型对象,需要靠函数的prototype属性和示例的_proto_属性来区别什么是原型链:指从一个实例对象开始往上找,这个实例对象的_proto_属性所指向的则是这个实例... 查看详情

js注意事项2(原型原型链object相关)(代码片段)

原型原型链、Object相关原型原型链什么是原型?prototype什么是原型对象(构造函数、原型属性或方法、__proto__)什么是原型链?prototype和__proto__的区别?constructor与上面两个有什么联系查看Object属性方法instanceo... 查看详情