JavaScript原型对象怎么用
这篇文章主要介绍“JavaScript原型对象怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript原型对象怎么用”文章能帮助大家解决问题。
成都创新互联服务项目包括金寨网站建设、金寨网站制作、金寨网页制作以及金寨网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,金寨网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到金寨省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
你理解的类?类的特性有哪些?(封装,继承,多态)
类实际是一个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,类语法也由两个组成部分:类声明和类表达式。类的主体都是在严格模式下执行的。
类的类体是由一对花括号{}中的部分,这是定义类成员的位置。【成员主要是方法或者构造函数】
类的所有方法都等价于是定义在类的prototype属性上。在类的实列上调用方法,等同于在调用原型上的方法。
class A(){ constructor(){} a(){} b(){} } //等价于 A.prototype={constructor(){},a(){},b(){}}
组成:
构造函数:
constructor方法是一个特殊的方法,这种方法用于创建和初始化一个由class创建的对象。一个类只能有一个构造函数,如果多个会报错,如果没有会默认添加一个空的constructor。其中constructor默认返回实列对象【即this】。一个构造函数可以使用super关键字来调用一个父类的构造函数。
属性
原型方法:该方法不需要加上function关键字,直接把函数的定义放进去就可以了。方法和方法之间不能用逗号分隔,会报错。
静态方法:使用static定义静态方法,调用静态方法,不能类的实列去调用,只能使用类去调用。
取值函数getter和存值函数setter:在类中使用get和set关键字,对某个属性设置存值和取值函数,拦截该属性的存取行为。
类语法:
类声明:使用class关键字
class Rectangle{ constructor(height,width){ this.height=height; this.width=width; } }
注意:函数声明和类声明的区别:类声明不会提升,函数声明会提升。
类表达式:类表达式可以是被命名的或匿名的。赋予一个命名类表达式的名称是类的主体的本地名称。
let Rectangle=class{//匿名类 constructor(height,width){ this.height=height; this.width=width; } } let Rectangle= class Rectangle{//命名类 constructor(height,width){ this.height=height; this.width=width; } }
使用extends创建子类:
extends关键字在类声明或类表达式中用于创建一个类作为另一个类的子类。
使用super调用超类:
super关键字用于调用对象的父对象上的函数
类的特性:
- 封装:主要是通过函数,私有属性和方法的设置主要是通过块级作用域实现
- 多态:可以通过函数调用,因为参数是可以多变的
- 继承:主要通过原型链
当我们在new一个普通函数时候,发生了什么?
以构造器的 prototype 属性(注意与私有字段 [[prototype]] 的区分)为原型,创建新对象;
将this 和调用参数传给构造器,执行;
如果构造器返回的是对象,则返回,否则返回第一步创建的对象。
new 这样的行为,试图让函数对象的语法跟类变得相似,但是,它客观上提供了两种方式,一是在构造器中添加属性,二是在构造器的 prototype 属性上添加属性。
new后面的函数名一定要大写吗?
不是,主要是为了便于区分类。一般约束为大写
如何理解ProtoType?查找一个对象的某个属性的过程?
prototype:
每个函数都有一个特殊的属性叫做原型对象【prototype】
js是基于原型的语言,每个对象都拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。这些属性和方法时定义在对象的构造函数之上的prototype属性上,而非对象的实例本身。
原型对象可以再拥有原型对象,并从中继承方法和属性,一层一层,层层向上直到一个对象的原型对象为 null,这种就是原型链。
创建对象实例时,对象的实例和它的构造器之间建立一个链接【__proto__属性,是从构造函数的prototype属性派生的。也就是__proto__与构造函数的prototype是指向同个对象】Object.getPrototypeof(new Foobar())和Foobar.prototype是相等的。
Object.create()。是从指定的原型对象,创建一个新对象。var newObj=Object.create(obj)。则newObj的__proto__=obj
每个实列对象都从原型中继承了一个constructor属性。该属性指向了构造此实例的构造函数。
一般都是构造器中定义属性,在prototype定义方法。
一般由构造函数实列化出一个新对象,新对象的原型对象是一个constructor和一个Object的原型对象组成。而函数构造函数的原型对象是也是由另外一个constructor和一个Function的原型对象组成。
var F=function(){}; Object.prototype.a=function(){}; Function.prototype.b=function(){}; var f=new F(); //上面的结果是,f能取到a,不能取到b. 详解: 1.f.__proto__===F.prototype 2.F.prototype.__proto__===Object.prototype(所以f可以访问a) 3.f.constructor===F 4.F.__proto__===Function.prototype(所以f.constructor.b可以访问)
查找属性的过程:
1.先查找自己身属性是否由包含该属性。
2.如果没有,才会沿着原型链,层层向上搜索,直到找到名字的属性
3.如果找到最后原型链的末尾,即最后的原型为null,那就是没有找到该属性。就会返回undefined
不同方法创建对象和原型链
1.使用语法结构创建对象
var o = {a: 1}; // o 这个对象继承了 Object.prototype 上面的所有属性 // o 自身没有名为 hasOwnProperty 的属性 // hasOwnProperty 是 Object.prototype 的属性 // 因此 o 继承了 Object.prototype 的 hasOwnProperty // Object.prototype 的原型为 null // 原型链如下: // o ---> Object.prototype ---> null var a = ["yo", "whadup", "?"]; // 数组都继承于 Array.prototype // (Array.prototype 中包含 indexOf, forEach 等方法) // 原型链如下: // a ---> Array.prototype ---> Object.prototype ---> null function f(){ return 2; } // 函数都继承于 Function.prototype // (Function.prototype 中包含 call, bind等方法) // 原型链如下: // f ---> Function.prototype ---> Object.prototype ---> null
2.使用构造函数创建对象
function A() { this.a = 1; this.b = 2; } A.prototype = { write: function(){ console.log(this.a); } }; var a = new A(); // a 是生成的对象,他的自身属性有 'a' 和 'b'。
3.使用Object.create()创建对象(ES5)
var a = {a: 1}; // a ---> Object.prototype ---> null var b = Object.create(a); // b ---> a ---> Object.prototype ---> null console.log(b.a); // 1 (继承而来) var c = Object.create(b); // c ---> b ---> a ---> Object.prototype ---> null var d = Object.create(null); // d ---> null console.log(d.hasOwnProperty); // undefined, 因为d没有继承Object.prototype 使用
4.使用class创建对象(ES6)
class A { constructor(a, b) { this.a = a; this.b = b; } } class B extends A { constructor(a,b,c) { super(a, b); this.c=c; } get ab() { return this.a + this.b; } set d(d) { this.a = d; this.b = d; this.c = d; } } var a= new A('a','b');//a的原型对象是 A.prototype var b = new B('a','b','c');// //b的原型对象是 B.prototype
当一个对象设置属性时都发生了什么?
如果对象包含普通数据访问属性,直接赋值只会修改属性值
var a={b=1}//因为b是a的普通属性,数据类型为Number
a.b="a"; //直接更改b的类型为String,且赋值为'a'.
如果对象找不到该属性,且原型链也找不到,就直接默认添加一个属性到该对象上。
var a={}//b不是a的普通属性,且原型链上也没有
a.b="a"; //直接在a上添加b的类型,为String,且赋值为'a'.
如果属性b,存在于原型链上
//在原型链上层存在名为b的普通数据访问属性并且没有标记为只读(writable:false),那就会直接在a中添加一个名为b的新属性,且值为'a'。而原型链上的b就会被屏蔽掉:
function A(){}; A.prototype.b=1; var a=new A(); a.b='a';
//在原型链上层存在b,但是他被标记为只读,那么无法修改已有属性,或者在a中创建屏蔽属性。如果运行在严格模式下,代码会抛出一个错误,否则,这条赋值语句会被忽略,总之,不会发生屏蔽。
function A(){ }; A.prototype.b=1 Object.defineProperty(A.prototype,'b',{ configurable:true, writable:false }) var a=new A(); a.b='a';//结果a.b还是1
关于“JavaScript原型对象怎么用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。
当前标题:JavaScript原型对象怎么用
网页地址:http://scyanting.com/article/pchcge.html