m.lom599.com_手机版乐白家网址_乐百家手机首页登录

js原型链与继承解析,JavaScript数组方法总结分析

作者: 手机版乐白家网址  发布:2019-07-10

由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaScript教程的整理,具体内容如下:

大多数编程语言中,都有类和对象,一个类可以继承其他类。
在JavaScript中,继承是基于原型的(prototype-based),这意味着JavaScript中没有类,取而代之的是一个对象继承另一个对象。:)

图片 1

一、普通方法

1. 继承, the proto 在JavaScript中,当一个对象rabbit继承另一了对象animal时,这意味着rabbit对象中将会有一个特殊的属性:rabbit.__proto__ = animal;
当访问rabbit对象时,如果解释器在rabbit中不能找到属性,那么它会顺着__proto__链往上在animal对象中寻找
栗子中的__proto__属性仅在Chrome和FireFox中可以访问,请看一个栗子:

首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在。然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享其属性(下面的两个例子会详细介绍)。

1、join() 将数组元素连接在一起,并以字符串形式返回
参数:可选,指定元素之间的分隔符,没有参数则默认为逗号
返回值:字符串
对原数组的影响:无

var animal = { eats: true }
var rabbit = { jumps: true }

rabbit.__proto__ = animal // inherit

alert(rabbit.eats) // true
function foo(){}
foo.prototype.z = 3;
var obj = new foo();
obj.x=1;
obj.y=2;
obj.x //1
obj.y //2
obj.z //3
typeof obj.toString; //function
obj.valueOf(); // foo {x: 1, y: 2, z: 3}
obj.hasOwnProperty('z'); //false

2、reverse()将数组的元素顺序变成倒序返回
参数:无
返回值:数组
对原数组的影响:原数组被修改为倒序排列之后的数组

eats属性是从animal对象中访问的。
如果在rabbit对象中已经发现了属性,那么就不会去检查proto属性啦。
再来一个栗子,当子类中也有eats属性时,父类中的就不会访问了。

图片 2

3、sort()对数组元素进行排序并返回
参数:可选,排序的方法函数,没有参数则默认按照字典顺序排序
返回值:排序后的数组
对原数组的影响:原数组被修改为排序之后的数组

var animal = { eats: true }
var fedUpRabbit = { eats: false}

fedUpRabbit.__proto__ = animal 

alert(fedUpRabbit.eats) // false

在这里,obj的原型(_proto_)指向foo函数的prototype属性,foo.prototype的原型指向Object.prototype,原型链的末端则为null,通过hasOwnProperty来查看z属性是否是obj上的,显示false,则obj上本没有z属性,但通过查找其原型链,发现在foo.prototype上有,所以obj.z=3,并且对于首例上obj.valueOf()以及toString都是Object.prototype上的,所以任何一个对象都有这两个属性,因为任何一个对象的原型都是Object.prototype.当然除了以下一个特例,

4、concat()连接若干个数组
参数:若干个,可以是数组或者是元素,
返回值:连接后的新数组
对原数组的影响:无

你也可以在animal中添加一个函数,那么在rabbit中也可以访问了。

var obj2 = Object.create(null);obj2.valueOf(); //undefined

5、slice()从数组中截下若干个元素,组成新的数组并返回
参数:两个数字,其中第二个可选,第一个参数表示开始截取的第一个元素的index值(截取时包含这个元素),如果第一个参数是负数,则指截取的元素从元素结尾开始算起(如:-1表示最后一个元素);第二个参数的意义则是停止截取的元素的index值(截取时不包含这个字符),负值情况同第一个参数
返回值:截取的新数组
对原数组的影响:无

var animal = {
 eat: function() {
  alert( "I'm full" )
  this.full = true
 }
}


var rabbit = {
 jump: function() { /* something */ }
}

rabbit.__proto__ = animal 

Object.create()为创建一个空对象,并且此对象的原型指向参数。下面一个综合实例向大家展示一下如何实现一个class来继承另外一个class

6、splice()从数组中替换、删除或插入元素并返回新数组
参数:若干个参数,其中第一个参数必需,其他为可选,第一个参数为操作的第一个index值,此时无第二个参数时,将删除第一个参数(包含第一个参数)的index值之后所有的元素,含有第二个参数时,第二个参数删除元素的个数,并返回这些元素组成的新数组;当第二个参数为0时,后面的参数会作为新的元素插入原数组,并返回一个空数组;当第二个参数不为0,且含有其他参数时,则进行替换操作,并返回替换之前那些原来元素组成的新数组
返回值:删除元素组成的新数组
对原数组的影响:会对原数组进行替换、删除、插入等操作

(1)rabbit.eat():
rabbit.eat()函数以如下两步执行:
首先,解释器查找rabbit.eat,rabbit中没有eat函数,那么它就顺着rabbit.__proto__往上找,在animal中找到了。
函数以this = rabbit运行。this值与__proto__属性完全无关。
因此,this.full = true在rabbit中:
看看这里我们有什么新发现,一个对象调用了父类函数,但是this还是指向对象本身,这就是继承。
被__proto__引用的对象称作是原型(prototype),animal是rabbit的原型(译者注:这就是rabbit的__proto__属性引用了animal 的prototype属性)
(2)读时查找,不是写时
当读取一个对象时,比如this.prop,解释器会在它的原型中查找属性。
当设置一个属性值时,比如this.prop = value,那么就没有理由去查找了,这个属性(prop)会被直接添加到这个对象中(这里是this)。delete obj.prop也类似,它只删除对象本身的属性,原型中的属性保持原封不动。
(3)关于proto
如果你在阅读指南,这里我们叫的__proto__,在指南中表示为[[Prototype]]。双方括号是很重要的,因为有另一个属性叫做prototype。

//声明一个构造函数Person
function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.hi = function (){
  console.log('Hi,my name is '   this.name  ',my age is ' this.age);
};
Person.prototype.LEGS_NUM=2;
Person.prototype.ARMS_NUM=2;
Person.prototype.walk = function (){
  console.log(this.name ' is walking !');
};
function Student(name,age,classNum){
  Person.call(this,name,age);
  this.classNum = classNum;
}
//创建一个空对象
Student.prototype = Object.create(Person.prototype);
//constructor指定创建一个对象的函数。
Student.prototype.constructor = Student;
Student.prototype.hi = function (){
  console.log('Hi,my name is '   this.name  ',my age is ' this.age ' and my class is ' this.classNum);
};
Student.prototype.learns = function (sub){
  console.log(this.name ' is learning ' sub);
};
//实例化一个对象Bosn
var Bosn = new Student('bosn',27,'Class 3');
Bosn.hi(); //Hi,my name is bosn,my age is 27 and my class is Class 3
Bosn.LEGS_NUM; //2
Bosn.walk(); //bosn is walking !
Bosn.learns('Math'); //bosn is learning Math

7、push()向数组的尾部添加元素并返回数组长度
参数:若干个,向数组尾部添加的元素
返回值:添加元素之后的数组的长度
对原数组的影响:原数组尾部被添加元素

2. Object.create, Object.getPrototypeOf __proto__是一个非标准的属性,由Chrome/FireFox提供访问,在其他的浏览器中保持不可见。
所有的现代浏览器除了Opera(IE > 9)支持两个标准的函数来处理原型问题:

图片 3

8、pop()从数组尾部删除一个元素
参数:无
返回值:删除的元素
对原数组的影响:原数组尾部被删除一个元素

Object.ceate(prop[,props])

构造函数Person与Student的this指向实例化的对象(Bosn),并且此对象的原型指向构造器的prototype。

9、unshift()向数组的头部添加元素并返回数组长度
参数:若干个,向数组头部添加的元素
返回值:添加元素之后的数组的长度
对原数组的影响:原数头部被添加元素

用给定了proto创建一个空对象:

我们用Object.create()方法来创建一个空对象,此对象的原型事项Person.prototype,这样写的好处是我们可以在不影响Person.prototype属性的前提下可以自己创建Studnet.prototype的任意属性,并且可以继承Person.prototype上原有的属性,因为子类Student是继承基类Person的。如果直接写Person.prototype

Student.prototype,那他两同时指向一个对象,在给Student.prototype添加属性的同时,Person的原型链上也会增加同样的属性。

对于构造函数Student里面的call方法,里面的this指向新创建的Student的实例化的对象,并通过call来实现继承。

Student.prototype.constructor = Student,这句话的含义是指定Student为创建Student.prototype这个对象的函数,如果不写这句话,该对象的函数还是Person。

对于继承,一共有三种方式来实现,

function Person(name,age){
  this.name = name;
  this.age = age;
}
function Student(){

}
Student.prototype = Person.prototype; //1
Student.prototype = Object.create(Person.prototype); //2
Student.prototype = new Person(); //3

以上这篇js原型链与继承解析(初体验)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

10、shift()从数组头部删除一个元素
参数:无
返回值:删除的元素
对原数组的影响:原数组头部被删除一个元素

var animal = { eats: true }

rabbit = Object.create(animal)

alert(rabbit.eats) // true

您可能感兴趣的文章:

  • JavaScript基于原型链的继承
  • JavaScript中的原型继承基础学习教程
  • 详解JavaScript中基于原型prototype的继承特性
  • js类式继承与原型式继承详解
  • javascript原型继承工作原理和实例详解
  • 浅析JS原型继承与类的继承
  • 浅谈javascript原型链与继承
  • JavaScript的原型继承详解
  • javascript原型链继承用法实例分析
  • js对象继承之原型链继承实例
  • 基于js中的原型、继承的一些想法

11、toString()将数组转化为字符串,每个元素之间以逗号相隔
参数:无
返回值:形成的字符串(二维数组中也只是连接二维数组的元素)
对原数组的影响:无

上面代码创建了一个空rabbit对象,并且原型设置为animal
rabbit对象创建好以后,我们可以往里添加属性了:

12、toLocaleString()是toString()方法的本地化版本

var animal = { eats: true }

rabbit = Object.create(animal)
rabbit.jumps = true

Object.creat函数的第二个参数props是可选的,它允许像新对象设置属性。这里就省略了,因为我们关系的继承。
(1)Object.getPrototypeOf(obj)
返回obj.__proto__的值。这个函数是标准的,可以在不能直接访问__proto__属性的浏览器中使用了。

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:js原型链与继承解析,JavaScript数组方法总结分析

关键词: m.lom599.com 乐百家开户APP

上一篇:没有了
下一篇:没有了