进修笔记:对象,原型和继续(1)

一:建立对象
1 工场形式

 function createPerson(name, age, jod){
     var obj = new Object();
     obj.name = name;
     obj.age = age;
     obj.job = job;
     obj.sayName = function(){
         console.log(this.name);
     };
     return obj;
 }

 var person1 = createPerson('NEVAR', 23, 'Front-end Engineer');
 var person2 = createPerson('Amy', 27, 'Doctor');

2 组织函数形式

 function Person(name, age, job){
     this.name = name;
     this.age = age;
     this.job = job;
     this.sayName = function(){
         console.log(this.name);
     }
 }

 var person1 = new Person('NEVAR', 23, 'Front-end Engineer');
 var person2 = new Person('Amy', 27, 'Doctor');
 //person1和person2都是Person的差别实例。
 alert(person1.constructor == Person); //true
 alert(person2.constructor == Person); //true
 //等于Object的实例也是Person的实例
 alert(person1 instanceof Object); //true
 alert(person1 instanceof Person); //true
 //组织函数发生的是两个差别实例,同名函数是不相等的
 alert(person1.sayName == person2.sayName); //false

3 原型形式

 function Person(){
 }

 Person.prototype.name = 'NEVAR';
 Person.prototype.age = 23;
 Person.prototype.job = 'Front-end Engineer';
 Person.prototype.sayName = function(){
     console.log(this.name);
 };

 var person1 = new Person();
 person1.sayName(); //NEVAR

 var person2 = new Person();
 person2.sayName; //NEVAR

 console.log(person1.sayName == person2.sayName);// true

 var person3 = new Person();
 person3.name = 'PP';
 console.log(person3.name); //PP 来自实例

 delete person3.name;
 console.log(person3.name); //NEVAR 来自原型

 alert(person1.hasOwnProperty("name")); //false 来自原型
 alert(person3.hasOwnProperty("name")); //true  来自实例

 alert("name" in person1); //true in操作符的运用

 function hasPrototypeProperty (obj, name){
     return !obj.hasOwnProperty(name) && (name in obj)
 }
 //推断属性来自实例 真 然后取反 
 //而且name属性存在于obj原型链上 申明这个 属性是属于prototype的

 alert(hasPrototypeProperty(person1,'name')) // true
 alert(hasPrototypeProperty(person3,'name')) // false

 alert(Object.keys(Person.prototype)) //"name,age,job,sayName" 
 //Person的可罗列属性

不过以上要领太过于贫苦 每次都要写反复的prototype

 function Person(){
 }

 Person.prototype = {
     name : 'NEVAR',
     age : '23',
     job : 'Front-end Engineer',
     sayName : function(){
         console.log(this.name);
     }
 };

constructor 属性不再指向Person 了 指向Object

var friend = new Person();
 alert(friend instanceof Object); //true
 alert(friend instanceof Person); //true
 alert(friend.constructor == Person); //false
 alert(friend.constructor == Object); //true

因而能够如许

 Person.prototype = {
     constructor : Person,
     name : 'NEVAR',
     age : '23',
     job : 'Front-end Engineer',
     sayName : function(){
         console.log(this.name);
     }
 };

原型的动态性

var friend = new Person();

 Person.prototype.sayHi = function(){
     alert('Hi');
 }
friend.sayHi();//Hi
//这时候没有题目,假如我们重写原型对象 那末状况就不一样了
function Person(){
}
var friend = new Person();
Person.prototype = {
constructor: Person,
name : "NEVAR",
age : 23,
job : "Front-end Engineer",
sayName : function () {
alert(this.name);
}
};
friend.sayName(); //error

重写原型对象切断了现有原型与任何之前已存在的对象实例之间的联络;它们援用的仍然是最初的原型。

原型形式也不是没有瑕玷。起首,它省略了为组织函数通报初始化参数这一环节,效果一切实例在默许状况下都将获得雷同的属性值

关于那些包括基础值的属性倒也说得过去,毕竟(如前面的例子所示),经由过程在实例上增加一个同名属性,能够隐蔽原型中的对应属性。但是,关于包括援用范例值的属性来讲,题目就比较突出了

function Person(){
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true

4组合运用组织函数形式和原型形式

 function Person(name, age, job){
     this.name = name;
     this.age = age;
     this.job = job;
     this.friends = ['Shelby','Court'];
 }
 Person.prototype = {
     constructor : Person,
     sayName : function(){
         console.log(this.name);
     }
 }

 var person1 = new Person('NEVAR', 23, 'Front-end Engineer');
 var person2 = new Person('Amy', 27, 'Doctor');

 person1.friends.push('Van');

 console.log(person1.friends) //'Shelby,Court,Van'
 console.log(person2.friends) //'Shelby,Court'
 console.log(person1.friends === person2.friends); // false
 console.log(person1.sayName === person2.sayName); //true

5动态原型形式
它把一切信息都封装在了组织函数中,而经由过程在组织函数中初始化原型(仅在必要的状况下),又坚持了同时运用组织函数和原型的长处。换句话说,能够经由过程搜检某个应当存在的要领是不是有用,来决议是不是须要初始化原型。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    if(typeof this.sayName != function){
        Person.prototype.sayName = function(){
            console.log(this.name);
        }
    }
}

 var person1 = new Person('NEVAR', 23, 'Front-end Engineer');
 friend.sayName();

6寄生组织函数形式

//不运用this和new
function Person(name, age, job){
    //建立要返回的对象
    var o = new Object();
    //能够在这里增加私有变量和函数

    //增加要领
    o.sayName = function(){
        console.log(name);
    }
    return o;
}

注重,在以这类形式建立的对象中,除了运用sayName()要领以外,没有其他方法接见name 的值

    原文作者:nevar
    原文地址: https://segmentfault.com/a/1190000004655308
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞