js advanced knowledge explanation

This article mainly shares with you the advanced knowledge of js

Inheritance

Inheritance is the relationship between types;

'Inheritance' of objects:

Actually it is a copy of the object

function extend (parent, child) 
{  for (var key in parent) 
{    if (! child[key] )
{      child[key] = parent[key]    
}  
}}

Prototypal inheritance

Only methods in the parent element can be inherited, attribute inheritance is meaningless

//父级元素function Person (name, age, sex)
{  this.name = name;  this.age = age;  
this.sex = sex}Person.prototype.sayHi = function ()
{  console.log('hello' + this.name);}
//子级元素function Student (score) 
{  this.score = score;}
//只能继承方法Student.prototype = new Person;Student.prototype.constructor = Student;var s1 = new Student(100);console.log(s1);

Note:

Problem: The parameter Student.prototype = new Person cannot be set to the constructor, and it can only be executed once, and the value cannot be passed to the attribute;

Borrowing the constructor

Use call to change this attributes, and can borrow constructors, but cannot inherit constructor methods;

//父级元素function Person (name, age, sex)
{  this.name = name;  this.age = age;  this.sex = sex}Person.prototype.sayHi = function ()
{  console.log('hello' + this.name);}
//子级元素function Student (name,age, sex, score) {Person.call(this, name, age, sex);  
this.score = score;}
//只能继承属性var s1 = new Student('na', 20, 'nv' , 100);console.log(s1);

Prototype + constructor

Combine prototype and constructor: But there will be a problem, The method of a child element will be accessed by multiple child elements;

How to solve this problem is to use object inheritance or copy;

function extend (parent, child) 
{  for (var key in parent) 
{    if (! child[key] )
{      child[key] = parent[key]   
 }  }}function Person (name, age, sex)
 {  this.name = name;  this.age = age; 
  this.sex = sex}Person.prototype.sayHi = function ()
  {  console.log('hello' + this.name); }
  //子级元素function Student (name,age, sex, score) 
  {Person.call(this, name, age, sex);  
  this.score = score;}Student.prototype.say = function ()
  {  console.log('hi'); }
  //只能继承属性extend(Person.prototype, Student.prototype);var s1 = new Student('na', 20, 'nv' , 100);console.log(s1);
  //子级元素function Teacher (name,age, sex,salary) {Person.call(this, name, age, sex);  this.salary = salary}extend(Person.prototype, 
  Teacher.prototype);var t = new Teacher('na', 10,'nv', 1000);console.log(t);

Function advancement

How to define a function

1. Function declaration

function fn() {

}

2. Function expression

var fn = function (){

}

3.var fn = new Function('The parameter is a string');

The fn here is both an object and a function

4. The difference between function declaration and function expression

Function declaration will be promoted and can be called before and after, while function expression can only be called after function expression

Scenarios applied to this

1. This in the constructor points to the calling object

2. This in the ordinary function points to window, in strict mode it points to undefined;

3. This in the timer points to the window

4. When the object method calls this, it points to the object calling the method

Change the point of this

1.bind:

The first parameter points to the element to which this points;

Returns a new function;

2.call

will call the function and change the point of this

Borrow constructor

Borrow methods of other objects

3.apply

The first parameter is the pointer to the changed this, and the second parameter is a Array;

Related recommendations:

JS advanced related knowledge

The above is the detailed content of js advanced knowledge explanation. For more information, please follow other related articles on the PHP Chinese website!