This is the 15th day of my participation in the August Text Challenge.More challenges in August

preface

In javascript, whenever an object is defined, it contains predefined properties. Each of these function objects has a Prototype property that points to the function’s prototype object.

Last time we looked at the use of constructors, today we are going to look at prototype objects on constructors, how to read and set prototype object methods, how to access function prototype objects, hasOwnProperty and in property operations.

Object oriented – Extend properties and methods on prototype objects

The main idea here is to replace the prototype object directly or in two ways

1. Use the dynamic nature of the object to add properties and methods

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

// Add a behavior
c1.prototype.run = function () {
  console.log('The cat got away');
}

var c1 = new Cat('flower'.1)；
c1.run(); / / the cat ran away
Copy the code

Here is:

However, there is a problem with this: if you add it in large batches, there is a lot of redundant code and it looks messy.

2. Replace the prototype object

The prototype object itself is an object, which is associated with the function through the function’s prototype attribute. So you can simply create an object as a prototype object and change the function’s prototype pointer to point to.

function Cat() {
    // this.name = ' ',
    // this.age = 1
}

Cat.prototype.sayName = function () {
  console.log('flower');
}
var c1 = new Cat();

// Rewrite the prototype
Cat.prototype = {
  constructor: Cat,
  name: "The ball ball".age: 2.sayName: function () {
    console.log('name ==> '.this.name); }};var c2 = new Cat();


c1.sayName();  / / flower
c2.sayName();  / / the ball the ball
Copy the code

When first instantiated, c1’s prototype pointer points to the constructor’s prototype object, which has only a sayName method and outputs a blossom. A new prototype object is then created for the constructor, that is, the constructor points to the new prototype object, but the prototype pointer for instance C1 remains the same as the original empty prototype object {}

Note the order in which the prototype object is replaced and the object is created —- Replace before create

Replace the summary

  • (1) When replacing the prototype object of the constructor, the prototype object pointed to by the object already created using the constructor does not change
  • (2) There is no relationship between the new prototype object and the old prototype object

Two, object-oriented – prototype object properties – method read and set

1. Set prototype object properties/methods

(1) object. Property = XXX If the property already exists in the object, modify the value of the property if the property does not already exist in the object, add the property error (2) prototype object. If the prototype object's property is of a reference type, then the object can also be modified to affect all objectsCopy the code

2. Access stereotype object properties/methods

When accessing properties, objects created by the constructor are first searched within the instance, and if not found, then the corresponding prototype object is searched.

function Cat(name, age) {
    this.name = name,
    this.age = age
}

Cat.prototype.sayName = function () {
  console.log('flower');
}
var c1 = new Cat('flower'.1);
c1.sayName();
Copy the code

There is no sayName method on the instance itself, so it looks in __proto__. And if it’s not there, it’s going to keep going until it’s not on the Object and then it returns null, and that’s the prototype chain.

Q: Why not prototype?

A: First, prototype is an attribute for every function, __proto__ is an attribute for every object, and your new instance is an object. In most cases __proto__ can be understood as “prototype of the constructor”, i.e. __proto__=== constructive.prototype. But sometimes it’s not equal.

Three, object-oriented – access function prototype object method

function Cat(name, age) {
    this.name = name,
    this.age = age
}

Cat.prototype.color = 'grey'

Cat.prototype.sayName = function () {
  console.log('flower');
}
var c1 = new Cat('flower'.1);
Copy the code

1. Use function name. Prototype

console.log(Cat.prototype.color); / / gray
Copy the code

2. Access through the __proto__ attribute of the object

console.log(c1.__proto__.color);  / / gray
Copy the code

Note note

  • __proto__ is a nonstandard attribute
  • That is, ECMAScript doesn’t include this property, it’s just a property that some browsers provide for developers to develop and debug.Not universal
  • Suggestion: Use this property during debugging, but not in formal code

4, object-oriented -hasOwnProperty and in property operations

1. in

Returns a Boolean value to determine if an object has a property (if it doesn’t, look in the prototype object).

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.address = 'guangzhou';

var p = new Person('Jack'.18);

// console.log(name in p); // false
console.log('name' in p); // true
console.log('address' in p); // true
Copy the code

2. hasOwnProperty

Only look up the object itself, also return a Boolean value.

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.address = 'guangzhou';

var p = new Person('Tom'.20);
console.log(p.hasOwnProperty('name')); // true
console.log(p.hasOwnProperty('address')); // false
Copy the code

5. Object-oriented -isPrototypeOf and instanceOf

1. isPrototypeOf

Determines whether an object is a prototype object of an instance

function Person() {}
// Person.prototype

var p = new Person();
console.log(Person.prototype.isPrototypeOf(p)); // true
console.log(p.__proto__.isPrototypeOf(p));  // true

/ / object
/* var obj = { 'name': 'Jack' }; Person.prototype = obj; console.log(Person.prototype.isPrototypeOf(p)); // false */


var obj = {
    'name': 'Jack'
};
Person.prototype = obj;

var p2 = new Person();
console.log(Person.prototype.isPrototypeOf(p2)); // true
Copy the code

2. instanceOf

Determines if an object is on the stereotype chain of a constructor

function Person() {}

var p = new Person();
console.log(p instanceof Person); // true

var obj = {
    name: 'Jack'
};
Person.prototype = obj;

var p2 = new Person();
console.log(p2 instanceof Person);  // true
console.log(p2); // Person {}
Copy the code

Object-oriented – Prototype improvement -constructor

Used to get the true type of an object

function Person() {}

var p = new Person();
console.log(p); // Person {}
// console.log(p.constructor.name);

Person.prototype = {
     constructor: Person, // Must be set to point to Object
     name: 'liao class'.age: 18
};

var p1 = new Person();
console.log(p1); // Person {}
console.log(p1.constructor.name); // Person
Copy the code

Seven,

I’ve said so much, so let’s summarize. But we don’t have to write a summary here. In fact, this diagram can be regarded as the operation of the prototype chain. It is not only useful in this article, but also a way to summarize ideas when we can’t remember clearly.

Eight, epilogue

Code word is not easy, if you feel helpful, feel good, welcome to like collection ~

Of course, as it is a personal arrangement, inevitably there will be mistakes, welcome to leave a comment feedback.