The concept of JS object, how it is declared, inheritance and encapsulation in JS

Traversal of objects

Objects can be treated as arrays using for in

var person={};
person.name="cyy";
person.age=25;
person.infos=function(){
    alert(this.name+" "+this.age);
}

for(var i in person){
    console.log(i);//Property or method name
    console.log(person[i]);//Property value or method value
}

 

Objects declared using constructors need to be instantiated before traversal

function Person(){
    this.name="cyy";
    this.age=25;
}
var p=new Person();
for(var i in p){
    console.log(i+":"+p[i]);
}

Distribution of objects in memory

Refer to the following map

 

 

Encapsulation: Hide the internal data and operation details of the object

Provide private keywords to hide certain properties and methods, restrict access to encapsulated data or content, and provide only a specialized access interface to an object

Interfaces are typically call methods

js does not provide such keywords, but they can be implemented by closures

Variable declared inside a function, not accessible outside

function fn(){
    var n=1;
    function fn2(){//privileged method
        alert(++n);
    }
    return fn2;
}
fn()();//2
//encapsulation
function Person(){
    var name="cyy";
    function _name(){
        alert(name);
    }
    this.name=function(){//This is an external interface
        return _name;
    }
}
var p=new Person();
var fn=p.name();
fn();//cyy

Disadvantages of encapsulation: 1, memory usage 2, inheritance disadvantage

 

Encapsulate an object student using the closure feature, and store information about a student using the object student, including name, gender, and age. This information can not be accessed directly from outside, it can only be obtained by the object method.

The student data structure is as follows:

 

 

//encapsulation
function Student(){
    var obj={};
    function _set(name,sex,age){
        obj.name=name;
        obj.sex=sex;
        obj.age=age;
    }
    function _get(){
        return obj.name+" "+obj.sex+" "+obj.age;
    }
    obj.get=function(){//External Interface
        return _get;
    }
    obj.set=function(){//External Interface
        return _set;
    }
    return obj;
}
var stu=new Student;
stu.set()("Xiao Ming", "male", 23);
console.log(stu.get()());//Xiao Ming Male 23

Prototype and prototype chain

Prototype: Add properties and methods using prototype, prototype object

Prototype chain: When JS creates an object, it has a u proto_ built-in property that points to its prototype object

var Person=function(){}
var p=new Person();
Person.prototype.say=function(){
    alert("The old lady is beautiful");
}
p.say();
/*
p There is no say method, so go to P. u proto_u
p.__proto__Is an object pointing to Person.prototype
Person.prototype Has a say method
 */


/*
The process of creating objects
1,Create object var p={}
2,Assign Person's prototype object to P. u proto_u=Person.prototype
3,Initialize object P Person.call(p)
 */
alert(p.__proto__==Person.prototype);//true

Prototype and prototype chain, implementing prototype inheritance

var Person=function(){}//Person Is an object
Person.prototype.say=function(){
    alert("Chen Ying Super Beauty");
}
var Cyy=function(){};//Cyy Is also an object
Cyy.prototype=new Person();//take Cyy Prototype pointing Person,Realization Cyy Inherited from Person
Cyy.prototype.sing=function(){
    alert("Chen Yingying sings");
}

var me=new Cyy();
me.say();//Chen Ying Super Beauty
me.sing();// Chen Yingying sings

/*
Analysis: me. u proto_u -> Cyy.ptototype -> Person.prototype
Person Is the parent Cyy is the child
 Inheritance: If none of the subclasses is present, it will inherit from the parent; if both the subclass and the parent are present, the subclass will override the parent's
 */

_u proto_u Implement prototype inheritance

function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.say=function(){
    alert(this.name+" "+this.age);
}

function Student(){};
Student.prototype=new Person("cyy",25);
//Person yes Student The parent of
//Subclass must inherit from instance of parent class
Student.prototype.grade=3;
Student.prototype.test=function(){
    alert(this.grade);
}

var s=new Student();
s.say();//cyy 25
s.test();//3
//s.__proto__ -> Student.prototype -> Person.prototype

The value of the prototype can be either an object or null

The final point of the prototype chain is null

alert(Object.prototype.__proto__);//null
// Situation One
function Parent(){
    this.name="parent";
    this.age=45;
}
function Child(){
    this.age=25;
}
Child.prototype.name="child";
Child.prototype=new Parent();
var c=new Child();
console.log(c.name);//parent

// Situation 2
function Parent(){
    this.name="parent";
    this.age=45;
}
function Child(){
    this.age=25;
}
Child.prototype=new Parent();
Child.prototype.name="child";
var c=new Child();
console.log(c.name);//child

In case one, Child.prototype=new Parent(); this sentence overrides the previous Child.prototype.name="child";

The value of an attribute is related to the order in which the code is executed, and the parent that inherits it overrides the first defined one

 

Creates an object of an animal class with attributes of animal name and number.Create a cat object, inherit an animal object, and define a method for the cat object.Instantiate a cat object, call its methods, and pop up animal names and numbers

function Animal(name,number){
    this.name=name;
    this.number=number;
}
function Cat(){};
Cat.prototype=new Animal("cat",30);
Cat.prototype.info=function(){
    alert(this.name+" "+this.number);
}
var c=new Cat();
c.info();//cat 30

Inheritance of constructors

Construct objects of the parent class inside subclasses to implement inheritance

When the parent object is inherited by the child object, all properties and methods are passed to the child object

function Parent(name){
    this.name=name;
    this.pSay=function(){
        alert(this.name);
    }
}
function Child(name,age){
    this.obj=Parent;
    this.obj(name);//Inherited two lines of code from the parent element
    this.age=age;
    this.cSay=function(){
        alert(this.name+" "+this.age);
    }
}
var p=new Parent("Dad");
p.pSay();//Dad
var c=new Child("daughter",25);
c.cSay();//Daughter 25
c.pSay();//daughter

Both apply and call in the object's built-in methods can be used for inheritance, but the difference between them is the way they are passed in.

Obj.call (method, var1, var2...)

Obj.apply (method, [var1, var2...])

function Parent(name,age,sex){
    this.name=name;
    this.age=age;
    this.sex=sex;
    this.say=function(){
        alert(this.name+" "+this.age+" "+this.sex);
    }
}
function Child(name,age){
    //Implement Inheritance
    Parent.call(this,name,age);//this Is Child
}
function Child2(name,age){
    //Implement Inheritance
    Parent.apply(this,[name,age]);//this Is Child
}

var c=new Child("cyy",25);
c.say();
//cyy 25 undefined
//Child Also owned Parent Properties and methods of
var c2=new Child2("cyy2",25);
c2.say();//cyy2 25 undefined

Create an animal class object Animal using a construction method that defines the name and number of animals in the object and defines a method.Create objects for two animals, such as cats and dogs, one that inherits Animal using the call method, and one that inherits Animal using the apply method.Instantiate two animals and pop up their names and numbers

function Animal(name,num){
    this.name=name;
    this.num=num;
    this.getInfo=function(){
        alert(this.name+" "+this.num);
    }
}
function Cat(name,num){
    Animal.call(this,name,num);
}
function Dog(name,num){
    Animal.apply(this,[name,num]);
}
var c=new Cat("cat",20);
c.getInfo();//cat 20
var d=new Dog("dog",30);
d.getInfo();//dog 30

JS Object-Oriented Keyword

Whether instanceof variable is an instance of object

var arr=new Array();
console.log(arr instanceof Array);//true
console.log(arr instanceof Object);//true

function Person(){};
var p=new Person();
console.log(p instanceof Person);//true
console.log(p instanceof Object);//true

 

delete Deletes object properties (properties and methods in the prototype chain cannot be deleted)

function Person(){
    this.name="cyy";
    this.eat=function(){
        alert("Having dinner");
    }
}
var p=new Person();
console.log(p.name);//cyy
delete p.name;//Delete properties of objects
console.log(p.name);//undefined

p.eat();//Having dinner
delete p.eat();//Eat to delete objects, fail
p.eat();//Having dinner

var name="cyy";
console.log(name);//cyy
delete name;
console.log(name);//name is not defined

 

call parameter implements inheritance one by one

The apply parameter implements inheritance as an array

function add(a,b){
    alert(a+b);
}
function sub(a,b){
    alert(a-b);
}
add.call(sub,4,8);
//12 Called add This method
add.call(sub2,4,8);
//sub2 is not defined Only one object that already exists can be referenced

add.apply(sub,[3,2]);
function Animal(){
    this.name="animal";
    this.show=function(){
        alert(this.name);
    }
}
function Cat(){
    this.name="cat";
}
var a=new Animal();
var c=new Cat();
a.show.call(c);//cat c Owned a Owned show Method
a.show.apply(c,[]);//cat c Owned a Owned show Method

Create two arrays and splice them using apply

var arr1=[2,3];
var arr2=[4,5];
arr1.push.apply(arr1,arr2);
//Called apply The preceding method: arr1.push
console.log(arr1);

 

Class array object for arguments argument

callee returns the function object being executed, returning the content of the function

arguments.callee

function fn(){
    console.log(arguments.callee);
    /*ƒ fn(){
        console.log(arguments.callee);
        }
    */
    //console.log(arguments.callee());Keep calling yourself and get stuck in an endless loop
}
fn();

 

Commonly used for recursive functions to call functions themselves

var sum=function(n){
    if(n<=1) return 1;
    return n+sum(n-1);
}
console.log(sum(4));//10
var sum=function(n){
    if(n<=1) return 1;
    return n+arguments.callee(n-1);
}
console.log(sum(4));//10

 

this points to the current object

1. this function call

var x=1;
function fn(){
    this.x=2;//this What changed was global variable x Value of
}
fn();
console.log(x);//2

2. this as a method call

Refers to the current object within the constructor

function Person(){
    this.name="cyy";
    this.show=function(){
        alert(this.name);
    }
}
var p=new Person();
p.show();//cyy

3. In call and apply, this is the first parameter

var name="cyy";
function show(){
    alert(this.name);
}
var obj={};
obj.name="cyy2";
obj.showName=show;
obj.showName.apply();//call show(),this Point to Global
obj.showName.apply(window);//Ditto
obj.showName.apply(obj);//call show(),this point obj

Calculating parameter totals with arguments

function sum(){
    var sum=0;
    for(var i=0;i<arguments.length;i++){
        sum+=arguments[i];
    }
    return sum;
}
console.log(sum(2,5,7));//14

Object impersonation: Pass attributes and methods of the parent class to the child class as privileged attributes and methods

function Parent(name,age){
    this.name=name;//privilege attribute
    this.age=age;
    this.show=function(){//privileged method
        alert(this.name+" "+this.age);
    }
}
Parent.prototype.walk=function(){//Unprivileged Method
    alert("walking...");
}

function Child(name,age,sex){
    this.obj=Parent;//Objects impersonate and can use the privilege attributes and methods of the parent class
    this.obj(name,age);
    this.sex=sex;
}
var c=new Child("cyy",25,"female");
c.show();//cyy 25
c.walk();// c.walk is not a function

Tags: Javascript Attribute

Posted on Fri, 14 Feb 2020 12:11:43 -0500 by wholein1