Article Directory
对象的创建方法
var obj = {}plainObject object literal/object direct- Constructor
- The built-in constructor of the system
new Object() - Custom function
new FunctionName()
- The built-in constructor of the system
Custom functions are named with big camel case (all first letters are capitalized)
构造函数内部原理
- Implicitly add this=() to the front of the function body
- Execute this.xxx = xxx;
- Implicit return this
Can also pass parameters
function Car(number){
// this = {};
this.date = 2020;
this.number = number;
//return this;
}
new car1 = new Car(1);
包装类
- new Number()
- new String()
- new Boolean()
The original type has no attributes and methods
, and actually automatically becomes a wrapper class when called
//包装类
var a = 1;
a.abc = 2;
// 不忍心报错 自动执行
// new Number(1).len = 2; delete 执行完又删除了
console.log(a.len); // undefined
// 发现访问属性又自动创建 new Number(4).len 是空的
The string has the .length property and the
process is the same as above
var str = 'abcd';
str.length = 2;
// nwe String('abcd').length = 2; delete
console.log(str); // 4
// new String('abcd').length 本身这个属性是存在的
ps. Du Yi "Object, Packaging (Part 2)" exercises in the second half
原型
.prototype – Prototype is an ancestor
Person.prototype.name= 'hello';
function Person{
}
var a = new Person();
console.log(a.name); // 输出 hello 继承自原型
The prototype is also an object can be written like this
Person.prototype = {
name : 'hello'
}
...
方别写很多
But there is a slight difference mentioned later
定义
The prototype is an attribute of the function object, which defines the common ancestor
of the object produced by the constructor. The object produced by the constructor can inherit the properties and methods of the
prototype. The prototype is also an object.
功能
Reduce code duplication and
put common parts into the prototype
修改原型
Adding, deleting, modifying and checking
can only directly operate prototype operations
Cannot be operated by child elements
function Father(){
this.num = 1;
}
var father = new Father();
Son.prototype = father;
function Son(){
}
var son = new Son();
son.num = 2;
//son.num ++; 同
console.log(father.num); // 1
It is equivalent to adding a new num attribute to son. The attribute in
father has not been modified or modified (error),
but this can be done
function Father(){
this.num = 1;
this.say = {
name : 'niko'
}
}
var father = new Father();
Son.prototype = father;
function Son(){
}
var son = new Son();
son.say.name = 'dio'; // 二次调用 .name
console.log(son.say.name); // dio
Successful modification can only modify the attributes in the method, which is equivalent to a second call
constructor
The prototype of the system has a constructor attribute and
returns a constructor,
but it can be changed manually
_proto_
_proto_Point to the prototype,
connect the prototype and the sub-object,
find the attribute in _proto_ after finding the attribute
_proto_The prototype stored by default
but can be modified
The difference between the two writing
Make a difference in the second modification
Person.prototype.name = 'hello';
function Person(){
// 系统自动执行 var this = {_proto_ : Person.prototype}
}
var person = new Person();
//两种修改方式
// 1. Person.prototype.name = 'wow';
// 2. Person.prototype = {
// name : 'wow'
// }
-
Successful modification is equivalent to directly changing the data in the space
-
Person.prototype.name is still
the wave of hello. This wave is to create a new space. Note that the comment in the constructor refers to the direction of _proto_ for
easy understanding:
var obj = {
name : 'a'};
var obj1 = obj ;
obj = {
name : 'b'}; // obj1 指向的还是a
Person.prototype = {
name : 'a'};
_proto_ = Person.prototype;
Person.prototype = {
name : 'b'};
Changed space
1 Change the property in the room
2 Change the room directly
Note the order just now! !
Person.prototype.name = 'hello';
function Person(){
// 系统自动执行 var this = {_proto_ : Person.prototype}
}
Person.prototype = {
name : 'wow'
}
var person = new Person();
Now successfully modify new in the back
Prototype chain
I don’t need to say more about the composition of the prototype chain.
Add, delete, modify
Same as above prototype
this little knowledge
Son.prototype = {
name : 'niko',
sayName : function (){
console.log(this.name);
}
}
function Son () {
this.name = 'dio';
}
var son = new Son(); // dio
this points to the person who called the method here is the son call
Object.create (prototype)
More convenient construction
var obj = {
name : 'sunny' , age : 123};
var obj1 = Object.create(obj); // obj1 原型就是obj 可以使用name和age
等同于
Obj.prototype.name = 'sunny';
function Obj() {
}
var obj1 = new Obj();
//var obj1 = Object.creat(Obj.prototype); 和上面相等 构造函数是空的就一样
The most terminal of most objects is Object.prototype
The prototype chain terminal Object.prototype
has methods such as toString (the wrapper class also has its own toString)
Note that most , there are special cases, the
prototype can be null when constructed with Object.creat()
var obj = Object.creat(null);
There is no property in the method Object.prototype
set to null after adding people _proto_can not use
(bedtime doubt) _proto_and .prototype
toString rewrite
123.toStringThe error point is recognized as a floating-point number and assigned to the variable
. The toString of 123 is called with the help of an intermediate amount . It is Number's own method instead of Object.
var num = 123;
num.toString(); --> // new Number(num).toString();
Number.prototype.toString = function(){
} --> 有自己的toString
Number.prototype._proto_=Object.prototype
This situation is called 方法重写: The method of the same name implements different functions z
is covered at the front end of the prototype chain
ToSting(); method is called when document.write(xx); is called
Off-topic accuracy
The range that js can calculate normally is 16 digits before the decimal point and 16 digits after the decimal point
call / apply
Function Changing the this point The
purpose is to change the this in the execution function to the passed object. The
difference is that the parameter list is different.
var name = "1";
var obj = {
name:2,
prop: {
name:3,
getName: function() {
return this.name;
}
}
}
console.log(obj.prop.getName()); //3
console.log(obj.prop.getName.call(obj)); //2
console.log(obj.prop.getName.call(this)); //1 在全局的this 是window
If you want to get 3 directly obj.prop.getName(), the current object of this method is prop
If we want to get 2, we can obj.prop.getName.call(obj) is to pass the obj object into the method, this time the this object is obj, this.name is equivalent to obj.name
1 is the same as obj.prop.getName.call(this) where this is the current page and the window is the same
Of course, you can also use apply. The difference between apply and call is call, that is, the call method accepts a list of several parameters, while the apply method accepts an array containing multiple parameters. apply(thisargs,[]) uses an array to pass parameters to the method, call(this, param1,param2); a small example below
function callTest(name, price) {
console.info(name + "-" + price);
}
callTest.call(this, 'superbing', 100);
callTest.apply(this, ['superbing', 200]);
Practical example
借用别人的函数实现自己的功能
function Person(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex; // Person的this
}
function Student(name,age,sex,tel,grade){
// var this ={} 等待赋值
Person.call(this,name,age,sex);
this.tel = tel;
this.grade = grade;
}
var student = new Student('sunny',123,'male',139,2017);
Pass the Student object to Person so that this in Person actually refers to the variable in Student, which is
equivalent to taking the three sentences of Person to Student. It is
abbreviated when the structure of others is completely in line with yourself.
prototype and proto
This is good