当前位置:网站首页>Prototype object in ES6
Prototype object in ES6
2022-07-07 10:21:00 【When can Xiaobai advance to success】
1、 Prototype chain
Prototypes of objects (__proto__)->Star Prototype object ;
Star Prototypes of prototype objects (__proto__)->Object Prototype object ;
Object Prototypes of prototype objects (__proto__)->null;
2、 Search rules for object members
according to “ Prototype chain ” lookup ;
First, check whether the member exists on the object ; If the object member does not , Then go Star Find on prototype object ;Star Prototype objects don't have , Go to Object Prototype (null) Up lookup ......, No return undefined;
If there is , There's also... On prototype objects , Then return the members on the object ( Nearby principle );
3、 Prototype object this Point to
In the prototype object this The direction of : Who calls the function in the prototype object ,this Just point to who ( Instance object );
4、 Extending built-in object methods
<script type="text/javascript">
// Application of prototype object , Extending built-in object methods
console.log(Array.prototype);
Array.prototype.sum = function(){
var sum = 0;
for(var i=0;i<this.length;i++)
{
sum += this[i];
}
return sum;
}
//var arr = [1,2,3];
var arr1 = new Array(1,2,3);
console.log(arr.sum());// Search according to the prototype chain
console.log(Array.prototype);
</script>
Running results :
Array and string built-in objects cannot override operations on prototype objects Array.prototype={}, Can only be Array.prototype.xx=function(){} The way .
5、call The role of methods
Call this function , And modify the function runtime this Point to .
fun.call(thisArg,arg1,arg2,...)
- thisArg: Currently calling function this object ;
- arg1,arg2: Parameters ;
<script type="text/javascript">
var o ={
name:'fang'
}
function fn(x,y){
console.log("this is call demo");
console.log(this);//this It was supposed to point to window(window.fn())
console.log(x+y);
}
fn.call();//1、 You can call fn function ;
fn.call(o,2,3);//2、 change this Point to , Point to o This object
</script>
Running results :
6、 Use the constructor to inherit the properties and methods of the parent class
1、 Inheritance attribute
adopt call() Put the parent type of this Pointing to a subtype this, In this way, the child type can inherit the properties of the parent type .
<script type="text/javascript">
function Father(uname,age){
//this Point to the object instance of the parent constructor
this.uname = uname;
this.age =age;
}
function Son(uname,age){
//this Object instances that point to subclass constructors
Father.call(this,uname,age);
}
var son1 = new Son('liming',25);
console.log(son1);
</script>
Running results :
2、 Inheritance method
<script type="text/javascript">
function Father(uname,age){
//this Point to the object instance of the parent constructor
this.uname = uname;
this.age =age;
}
Father.prototype.money = function()
{
console.log("make money");
}
function Son(uname,age){
//this Object instances that point to subclass constructors
Father.call(this,uname,age);
}
Son.prototype = new Father();// Execute the prototype of the subclass to the instance object of the parent class
Son.prototype.constructor = Son;
Son.prototype.exam = function(){
console.log("exam :100");
}
var son1 = new Son('liming',25);
console.log(son1);
console.log(Father.prototype);
</script>
Running results :
7、 Traversal array
1、forEach()
array.forEach(function(currentValue,index,arr))
- CurrentValue: Array the values of the current item
- index: Array the index of the current item
- arr: Array object itself
<script type="text/javascript">
var arr =[1,2,3];
var sum =0;
arr.forEach(function(value,index,array){
sum+=value;
});
console.log("sum:"+sum);
</script>
2、filter() Filter data
array.filter(function(currentValue,index,arr))
- filter() Method to create a new array , The elements in the new array are checked by checking all the eligible elements in the specified array , It is mainly used to filter arrays .
- It directly returns a new array .
- currentValue: Array the values of the current item
- index: Array the index of the current item
- arr: Array object itself
<script type="text/javascript">
var arr =[61,12,83];
var newArr = arr.filter(function(value,index,array){
return value >= 20;
});
console.log("newArr:"+newArr);
</script>
Running results :
3、forEach and some difference
var arr =['red','green','blue'];
arr.some(function(value,index,array){
if(value == 'green'){
console.log("find ");
return true;// stay some Meet in return Will terminate the traversal , Iteration is more efficient .
}
console.log("value:"+value);
});
8、 String method
trim() Method will start from a string Delete blank characters at both ends
str.trim()
- trim() Method does not affect the original string itself , It returns a new string .
<script type="text/javascript">
var str = ' liming ';
console.log('str:'+str);
var newStr = str.trim();
console.log("newStr:"+newStr);
</script>
9、 Object methods
Object.defineProperty() Define new attributes in the object or modify the original attributes .
Object.defineProperty(obj,prop,descriptor)
- obj: It's necessary . Target audience .
- prop: It's necessary . Attribute definitions that need to be defined or modified
- descriptor: It's necessary . describe
descriptor Definition : In the form of objects {} Writing
- value: Set the value of the property , The default is undefined
- writalbe: Whether the value can be overridden .true|false( The default is false)
- enumerable: Whether the target property can be enumerated .true|false( The default is false)
- configurable: Target attribute Yes No Can be deleted Or whether it can be done again Modify features ture|false( Default false)
<script type="text/javascript">
var obj ={
id:1,
name:'huawei',
price:1000
};
Object.defineProperty(obj,'id',{
value:2,
writable:false,
});
Object.defineProperty(obj,'address',{
value:'shandong china',
enumrable:false,
configurable:false,//address Cannot be deleted
});
console.log(Object.keys(obj));// Can't find address
delete obj.address;
console.log(obj);//address Cannot be deleted
delete obj.name;
console.log(obj);//name Allow to be deleted
</script>
Running results :
边栏推荐
- Parameter sniffing (1/2)
- The new activity of "the arrival of twelve constellations and goddesses" was launched
- LeetCode 练习——113. 路径总和 II
- Guid主键
- 电表远程抄表拉合闸操作命令指令
- fiddler-AutoResponder
- Postman interface test VII
- Become a "founder" and make reading a habit
- Deconvolution popular detailed analysis and nn Convtranspose2d important parameter interpretation
- Win10安装VS2015
猜你喜欢
ORM -- database addition, deletion, modification and query operation logic
【acwing】786. 第k个数
ORM model -- creation and query of data records
fiddler-AutoResponder
Postman interface test I
Web3.0 series distributed storage IPFs
PDF文档签名指南
Fiddler simulates the interface test
request对象对请求体,请求头参数的解析
This article explains the complex relationship between MCU, arm, muc, DSP, FPGA and embedded system
随机推荐
Use of JSON extractor originals in JMeter
虚数j的物理意义
Leetcode exercise - 113 Path sum II
Embedded background - chip
STM32产品介绍
STM32基础知识—内存映射
Weekly recommended short videos: what are the functions of L2 that we often use in daily life?
运用tensorflow中的keras搭建卷积神经网络
IPv4 socket address structure
HAL库配置通用定时器TIM触发ADC采样,然后DMA搬运到内存空间。
STM32 product introduction
IO模型复习
fiddler-AutoResponder
Wallys/IPQ6010 (IPQ6018 FAMILY) EMBEDDED BOARD WITH ON-BOARD WIFI DUAL BAND DUAL CONCURRENT
Can I open a stock trading account online? Is it safe
PDF文档签名指南
【剑指Offer】42. 栈的压入、弹出序列
Interface test
Using keras in tensorflow to build convolutional neural network
基于gis三维可视化技术的智慧城市建设