Understand the relationship between the constructor function for the prototype with the four prototype chain

First: How to understand the same point function, constructors and differences?

  1. The constructor is an ordinary function, and the way to create a normal function is no different, except that the constructor's first letter capitalized habit.
  2. The difference between a constructor and an ordinary function is invoked different ways, ordinary function is called directly, while the constructor need to use the new keyword to call.
    For example: a person create a constructor function and Person
//普通函数
function person(name , age ,gender){
	//创建一个新的对象
	var obj = new Object();
	//向对象中添加属性
	obj.name = name;
	obj.age = age;
	obj.gender = gender;
	obj.sayName = function(){
		alert(this.name);
	};
	//将新的对象返回
	return obj;
}
//普通函数的调用
var obj = person("蜘蛛精",18,"女"); 
console.log(obj);

//构造函数
function Person(name , age , gender){
	this.name = name;
	this.age = age;
	this.gender = gender;
	this.sayName = function(){
		alert(this.name);
	};
}
// 构造函数的调用
var per = new Person("猪八戒",28,"男");
console.log(per);
  1. Object created by ordinary functions are Object instances of objects created by the constructor of its own instance, but all objects are Object offspring.

For example: In the above example the results look console output of FIG.
Here Insert Picture Description
4. When in the form of a function call, this is the window, and when called in the constructor of the form, this is the newly created object.

//普通函数
function fn() {
	console.log(this) //输出的是window
}
//普通函数的调用
var obj = fn()
//构造函数
function Function() {
	console.log(this) //输出的是Function
}
//构造函数的调用
var Fn = new Function()

Second: the relationship between the prototype and the prototype chain

I, on the prototype:

  1. Every function we created, the parser will add a property to the function prototype, and the prototype property to an object, the object that is the prototype of this function, we can call it a prototype.
  2. If the function is called as an ordinary function prototype does not have any effect when the function is called as the constructor object it created will have an implicit property, pointing to the prototype object constructor, we can be __proto__ access to the property.
  3. Prototype object is equivalent to a public area, all instances of the same class can access to the prototype object, we can target content are common, unified set to the prototype object.

Second, on the prototype chain:

  1. Prototype object is an object, so it also has a prototype, when we use the property or method of an object, will now itself find itself in if there is, then the direct use, if not then go to the prototype object to find, if the prototype object has is used, if not then go to find the prototype of the prototype, thus forming a chain structure, we call prototype chain.
  2. Prototype chain is the prototype of the topmost object Object, Object prototype object is not a prototype, if you use a property or method of an object, the prototype chain does not always find the Object prototype, still did not find the Object prototype, undefined is returned.

The so-called prototype chain is actually composed of a prototype object prototype object of a chain structure.

Third, the prototype of the role:

  • When you create a constructor, the object can be shared properties and methods, unity added to the prototype object constructor, so do not separately for each object is added, it will not affect the global scope, you can make each object having these properties and the methods.

Fourth, how to check the object contains a single property

  • When use in checking whether the object contains a property, but if the object does not have a prototype, will return true
console.log("属性名" in 对象名);

Fifth, check whether the object itself contains a certain property

  • Whether the object can be used hasOwnProperty () to check the object containing the attribute itself, only when the attributes contained in the object itself, using this method will return true
console.log(对象名.hasOwnProperty("属性名"));

Third, functions, among the prototype object constructor

  • Ordinary function prototype object is the Object prototype object, the prototype object constructor prototype object is the Object prototype object. Constructor function or look exemplified output.
    Here Insert Picture Description
    ** Note: ** through the constructor property among the screenshot, we can see that the default constructor property points to a normal function of the prototype object where the constructor Object, and the constructor property points to a default constructor constructor Person prototype object is located.
Published 20 original articles · won praise 11 · views 1748

Guess you like

Origin blog.csdn.net/qq_16221009/article/details/103096237