原型未定义的原因

Question

我知道这已被问过几百次,但是,我似乎无法掌握这个概念 prototype

这是我的示例脚本

var config = {
  writable: true,
  enumerable: true,
  configurable: true
};

var defineProperty = function(obj, name, value) {
  config.value = value;
  Object.defineProperty(obj, name, config);
}


var man= Object.create(null);
defineProperty(man, 'sex', "male");

var person = Object.create(man);
person.greet = function (person) {
    return this.name + ': Why, hello there, ' + person + '.'
}
var p=Object.getPrototypeOf(person);
alert(p.sex);//shows male
person.prototype.age=13;//why there is a error said the prototype is undefined? I thought it supposed be man object...

var child=function(){}
child.prototype.color="red";//why this line doesn't show error? both child and person are an object . 

alert(child.prototype.color);//shows red

var ch=Object.getPrototypeOf(child);

alert(ch.color);//why it is undefined? it is supposed red.

希望你能给我一些帮助......谢谢.

更新:

谢谢你们的帮助,根据Elclanrs的回答,以下是我学到的.

Function是javascript中的内置对象之一.3格式创建函数对象是相等的.

var function_name = new Function(arg1, arg2, ..., argN, function_body)
function function_name(arg1, arg2, ..., argN)
{
...
}
var function_name=function(arg1, arg2, ..., argN)
{
...
}

所以,这就是创建原型链的原因,我们必须创建一个函数然后用new关键字调用它.

Function.prototype是对All the Function对象的引用prototype.

干杯

Answer 1

该prototype属性仅存在于函数上,person并不是函数.这是一个object.

这是发生了什么:

var man = Object.create(null);         // man (object) -> null
man.sex = "male";

var person = Object.create(man);       // person (object) -> man (object) -> null
person.greet = function () { ... };

var p = Object.getPrototypeOf(person); // man (object) -> null
alert(p.sex);                          // p is the same object as man

person.prototype.age = 13;             // person doesn't have a prototype

var child = function () {};            // child (function) -> Function.prototype
                                       // -> Object.prototype -> null
child.prototype.color = "red";         // child has a prototype

var ch = Object.getPrototypeOf(child); // Function.prototype

alert(ch.color);                       // ch is not the same as color.prototype
                                       // ch is Function.prototype

有关更多信息,我建议您阅读以下答案:https://stackoverflow.com/a/8096017/783743

编辑:用尽可能少的单词解释发生的事情:

1. JavaScript中的所有内容都是一个对象,除了原始值(布尔值,数字和字符串),null以及undefined.

2. 所有对象都有一个被调用的属性[[proto]],程序员无法访问它.但是,大多数引擎都可以访问此属性__proto__.

3. 当你创建一个对象一样var o = { a: false, b: "something", ... },然后o.__proto__是Object.prototype.

4. 当你创建一个对象一样var o = Object.create(something),然后o.__proto__是something.

5. 当你创建一个对象一样var o = new f(a, b, ...),然后o.__proto__是f.prototype.

6. 当JavaScript无法在o其上找到属性时,搜索属性o.__proto__然后o.__proto__.__proto__等等,直到它找到属性或原型链结束null(在这种情况下属性为undefined).

7. 最后,Object.getPrototypeOf(o)返回o.__proto__而不是o.prototype- __proto__存在于包括函数在内的所有对象上,但prototype仅存在于函数上.

Answer 2

我想你可能会混合概念.首先尝试用经典的原型继承来掌握原型的概念,然后你可以进入所有新的Object东西.

在JavaScript中,每个对象(数字,字符串,对象,函数,数组,正则表达式,日期......)都有一个prototype您可以将其视为该对象的所有当前和未来实例共有的方法(函数)的集合..

要创建原型链,您必须创建一个函数,然后使用new关键字调用它以指定它是构造函数.您可以将构造函数视为主要函数,它接受构建对象新实例所需的参数.

考虑到这一点,您可以扩展本机对象或创建自己的新原型链.这类似于类的概念,但在实践中更强大.

与您的示例类似,您可以编写如下的原型链:

// Very basic helper to extend prototypes of objects
// I'm attaching this method to the Function prototype
// so it'll be available for every function
Function.prototype.inherits = function(parent) {
  this.prototype = Object.create(parent.prototype);
}

// Person constructor
function Person(name, age, sex) {
  // Common to all Persons
  this.name = name;
  this.age = age;
  this.sex = sex;
}

Person.prototype = {
  // common to all Persons
  say: function(words) {
    return this.name +'says: '+ words;
  }
};

// Student constructor   
function Student(name, age, sex, school) {
  // Set the variables on the parent object Person
  // using Student as a context.
  // This is similar to what other laguanges call 'super'
  Person.call(this, name, age, sex);
  this.school = school; // unique to Student
}

Student.inherits(Person); // inherit the prototype of Person

var mike = new Student('Mike', 25, 'male', 'Downtown'); // create new student

console.log(mike.say('hello world')); //=> "Mike says: hello world"

在较新版本的JavaScript(阅读EcmaScript)中,他们添加了处理对象和扩展对象的新方法.但是这个概念与传统的原型继承有点不同,它似乎更复杂,而且更多关于JS如何在其下工作的知识将有助于真正理解它是如何工作的,而且它在旧版浏览器中不起作用.这就是为什么我建议你从经典模式开始,你会在互联网上找到准确和丰富的信息.